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

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