Overriding Default CSS in ASP.NET AJAX Control Toolkit's TabContainer Control

ajax, ajaxcontroltoolkit, asp.net, asp.net-ajax, css

Solution

After a lot of messing around, I got it working, though I'm not entirely sure what I did...

I think, I had to:

- Manually add CssClass to ajaxToolkit:TabContainer, as even when setting it via the properties it didn't seem to generate.

I tried overriding the class ajax__tab_xp, but that didn't work, so I created a new class called ajax__custom and that worked. So my CSS in the end looked like:

.ajax__custom .ajax__tab_header .ajax__tab_tab
{
    height: 100px;
}

Hope this helps someone else.

Problem

I am using the ASP.NET AJAX TabContainer control in a web application. I've placed images in the headers for each tab rather than using text - but the images are truncated b/c the default CSS for TabContainer states that the header is only 13px high: ``` .ajax__tab_xp .ajax__tab_header .ajax__tab_tab { height:13px; padding:4px; margin:0px; background:url("tab.gif") repeat-x; } ``` I have a CSS file I'm using and have added the following line to override that contained in the default CSS for TabContainer: ``` .ajax__tab_xp .ajax__tab_header .ajax__tab_tab { height:83px; padding:4px; margin:0px; background:url("tab.gif") repeat-x; } ``` But it is still using the default 13px, why? You can see the default css file here: Default CSS File

Original source