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

Question

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

Answer 1

Try using !important like this:
.ajax__tab_xp .ajax__tab_header .ajax__tab_tab
{
height:83px !important;
}
by the way, If you don't change other properties of the default class, you don't have to retype them...

Answer 2

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.

Answer 3

Dave,
I did the same thing. Copied Tab CSS and modified to my hearts content. Them I tried to disable tabs. This was working fine using default CSS. I thought something must be missing in my version. But checking generated source, it looks like TAB generates some js in page to enable/disable - Which, if we were permitted to to that on this project I would have gone with JQuery in the first place.
Save yourself some grief and use !Important to override default css if you dont want to go to javascript city.

Answer 4

I am having to modify some web forms, upgraded to bootstrap and suddenly I noticed that some pages had
So The class I see generated is
class="ajax__tab_xp"
Thus based on answers above , I found that 25px is all I need
.ajax__tab_xp .ajax__tab_header .ajax__tab_tab
{
height:25px !important;
}
That should work for others hopefully.