Переопределение пользовательских CSS с другим классом

Question

У меня проблемы с установкой состояния "включено" для вкладки этого меню. В итоге я перешел с использования UL и LI из-за проблем с отображением в IE 6. Я сейчас использую таблицу.

Таблица очень хорошо работает в целевых браузерах с ошибкой смены цвета в Opera, но остальные хороши.

Дело в том, что мне нужно иметь состояние "включено" для загруженной вкладки, где она имеет стиль пролонгации.

До сих пор я не был в состоянии произвести какие-либо изменения на человека <TD>.

Страница находится в разработке на http://hiv411.dreamhosters.com/page.php

Большое спасибо за любые советы!

Код таблицы выглядит так:

<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> 
</table>

CSS выглядит так:

.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

Разве .tabOn td не должно быть td.tabOn? Также .tabOn td a должно быть td.tabOn a

То, как вы сейчас это сделаете, будет для <tr class="tabOn">

Answer 2

Что вам нужно сделать, это изменить порядок CSS, сначала общий тег и классы. И применяя те же классы table.tabs (чтобы css не переопределял свойства), вы можете сэкономить место, но не записывать одни и те же свойства дважды в .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;
}