Overiding custom CSS with another class

Question

Hello,

I'm having trouble establishing an "on" state for a tab of this menu. I ended up migrating from using UL and LI due to IE 6 issues with display. Am now using a table.

Table works very well in target browsers with a rollover color bug in Opera but the rest are good.

Thing is I need to have an "on" state for the loaded tab where it has the rolled-over styling.

Thus far I have not been able to effect any changes on an individual .

Page in question is in development at http://hiv411.dreamhosters.com/page.php

Thank you very much for any advice!

JG

Table code looks like:

<table border="0" cellspacing="0" cellpadding="0" class="tabs"> 
<tr> 
    <td class="tabs"><a href="page.php" class="tabs">First Link</a></td> 

    <td class="tabs"><a href="page.php" class="tabs">Another Link</a> </td> 

    <td class="tabOn"><a href="page.php" class="tabOn">A Third Link Which is Longer</a> </td> 
</tr>

CSS is like so:

.tabOn td {
    width:140px;
    height:29px;
   border: 1px solid #fff;
    background-image:none;
    background-color:#FFF;
    color:#000;
   font-size:9pt;
   font-weight:bold;
   text-align:center;
   white-space:nowrap;
}
.tabOn td a{
   color:#000;
   display: block;
   padding: 6px;
   padding-top:7px;
   height:17px;
   text-decoration: none;
   margin-top:1px;
   white-space:nowrap;
}

/* NORMAL STATE */

table.tabs {
   border-collapse: collapse;
}
table.tabs td {
    width:140px;
    height:29px;
   border: 1px solid #fff;
   background:url(/images/tabOverBG.jpg) repeat-x;
   background-position:bottom;
   font-size:9pt;
   font-weight:bold;
   text-align:center;
   white-space:nowrap;
}
table.tabs td a{
   display: block;
   padding: 6px;
   height:17px;
   text-decoration: none;
   margin-top:4px;
   white-space:nowrap;
}
table.tabs td a:link, table.tabs td a:visited {
   color: #fff;
}
table.tabs td a:hover, table.tabs td a:active, table.tabs td:hover {
   color: #000;
   background-color: #fff;
   background-image:none;
}

Answer 1

Shouldn't .tabOn td be td.tabOn? Also .tabOn td a should be td.tabOn a

The way you have it now would be for <tr class="tabOn">

Answer 2

what you have to do is change the order of the css, first the general tag and the classes. And applying the same classes table.tabs (so the css doesn't override properties), You can save space but not writing the same properties twice in .tabOn:

table.tabs {
   border-collapse: collapse;
}
table.tabs td {
   width:140px;
   height:29px;
   border: 1px solid #fff;
   background:url(/images/tabOverBG.jpg) repeat-x;
   background-position:bottom;
   font-size:9pt;
   font-weight:bold;
   text-align:center;
   white-space:nowrap;
}
table.tabs td a{
   display: block;
   padding: 6px;
   height:17px;
   text-decoration: none;
   margin-top:4px;
   white-space:nowrap;
}
table.tabs td a:link, table.tabs td a:visited {
   color: #fff;
}
table.tabs td a:hover, table.tabs td a:active, table.tabs td:hover {
   color: #000;
   background-color: #fff;
   background-image:none;
}
table.tabs td.tabOn {
   background-image:none;
   background-color:#FFF;
   color:#000;
}
table.tabs td.tabOn a{
   color:#000;
   margin-top:1px;
}