find discount viagra online

Saturday, November 1, 2014

AJAX Tab Container – Style Problem

November 1, 2009 by · 3 Comments 

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.

Top Blogs

Comments

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!

*