Ajax Tabs not showing properly

I have tried implementing the tabcontainer using the example, and for some reason I cannot get the tabs to show properly. For some reason there is a grey box in each of the tabs which covers exactly half of every tab. Is there a style I need to add to fix this?

This a link to an image of what I am talking about:

http://shutter7.com/coppermine/displayimage.php?pid=2499&fullsize=1

Hi there,

For some reason, the use of ajax tab, your aspx are require to be xhtml validate.

Put following line in your aspx page. It will fixes the issue. Hope it helps!

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

That fixed it, but now all of my pages with css styles are now messed up. For example: the same class for a font is working in one row and not the other.

Hi jwhite128,

I've had this problem too. I was able to solvethis using simple workaround: I just overwrote the CSS class style withmy own implementation which then I included directly in my applicationas CSS resource. I even can reproduce the original "XP" style of theTabContainer by just copying the relevant images in my application'sThemes folder.

So my suggestion: create new Tabs style andimplement whatever visual behavior you need, then just set the CssClassattribute of the TabContainer extender.

Kind regards,

sbogus.

I've tried looking for the class names... where are some docs that contain the class names in question?

Hi jwhite128,

There's no direct documentation about which CSS classes you can override and how to do that. There's rather than information spread over several source files from the AjaxControlToolkit source three. You should look at the Tabs subfolder (not the one from the Examples!)

These are the CSS classes you can override in a CSS file ("new" is the name of the style I choose for this post, you should then specify the TabContainer's attribute CssClass="ajax__tab_new" to override the CSS style):

/* inactive tab */
.ajax__tab_new .ajax__tab_header
.ajax__tab_new .ajax__tab_outer
.ajax__tab_new .ajax__tab_inner
.ajax__tab_new .ajax__tab_tab
/* active tab */
.ajax__tab_new .ajax__tab_active .ajax__tab_outer
.ajax__tab_new .ajax__tab_active .ajax__tab_inner
.ajax__tab_new .ajax__tab_active .ajax__tab_tab
/* tab hover */
.ajax__tab_new .ajax__tab_hover .ajax__tab_outer
.ajax__tab_new .ajax__tab_hover .ajax__tab_inner
.ajax__tab_new .ajax__tab_hover .ajax__tab_tab
/* tab's body */
.ajax__tab_new .ajax__tab_body

Kind regards,

sbogus.

This is for anyone who implements<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> and finds that all of their classes and style sheets get messed up.

The classes in your page become case sensitive. So make sure you check the cases of your classes or else they will appear to be all jacked up.