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.