Переопределение пользовательских 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

то, что вам нужно сделать, это изменить порядок 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; 
} 

Answer 2

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

Образом, у вас сейчас было бы для <tr class="tabOn">