web analytics

AJAX Tab Container – Style Problem

Cause

Since the release of ASP.Net 2.0, all the pages’ DTD are set to XHTML 1.0 Transitional by default. Consequently, AJAX Control Toolkits were also created to adhere with standard. All the rendered AJAX controls will follow the said document type definition. As it turns out, our page only adhere to HTML 4.01 Transitional DTD making the tab looked distorted.

Solution

Well one solution it to change the DTD of your page to XHTML 1.0 Transitional. This will quickly fixed your problem (best practice as well). But if time is not in your side you can do a little CSS hack to make your tab looking good again. Just include the CSS code below internally inside your page:

<style type="text/css">

.ajax__tab_default .ajax__tab_inner {height : 100%;}
.ajax__tab_default .ajax__tab_tab {height : 100%;}

.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {height : 100%;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {height : 100%;}

.ajax__tab_xp .ajax__tab_inner {height : 100%;}
.ajax__tab_xp .ajax__tab_tab {height:100%}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {height : 100%;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {height : 100%;}

</style>

.customtabstyle .ajax__tab_outer {height:85%;}
.customtabstyle .ajax__tab_inner {height:85%;}
.customtabstyle .ajax__tab_tab {height:85%;}
.customtabstyle .ajax__tab_hover .ajax__tab_outer {height:85%;}
.customtabstyle .ajax__tab_hover .ajax__tab_inner {height:85%;}
.customtabstyle .ajax__tab_hover .ajax__tab_tab {height:85%;}
.customtabstyle .ajax__tab_active .ajax__tab_outer {height:85%;}
.customtabstyle .ajax__tab_active .ajax__tab_inner {height:85%;}
.customtabstyle .ajax__tab_active .ajax__tab_tab {height:85%;}

Just remember that the CSS should be inside your .aspx file and not in an external .css file. The style will not take effect in doing so.

3 thoughts on “AJAX Tab Container – Style Problem

  • December 11, 2009 at 5:56 pm
    Permalink

    Awesome… really stunning subject. I am goin to write about it also!

  • August 17, 2011 at 7:37 am
    Permalink

    This is exactly what I have been looking for! Thank you! Now I need to figure out why the tabs don’t get larger when I increase the size of the font and I’m ready to go!

  • September 6, 2011 at 6:01 pm
    Permalink

    THANK YOU!!!

Leave a Reply

%d bloggers like this: