kamagra bombone novi sad

Friday, November 27, 2015

AJAX Tab Container – Style Problem

November 1, 2009 by · 3 Comments 


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.


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%;}


.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.

Top Blogs


3 Responses to “AJAX Tab Container – Style Problem”
  1. Awesome… really stunning subject. I am goin to write about it also!

  2. Jamie says:

    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!

  3. gustavo says:

    THANK YOU!!!

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!