Surcharge CSS personnalisé avec une autre classe

Question

Je n'arrive pas à établir un état «activé» pour un onglet de ce menu. J'ai fini par migrer d'UL et LI en raison de IE 6 problèmes avec l'affichage. Suis maintenant en utilisant une table.

La table fonctionne très bien dans les navigateurs cibles avec un bug de couleur de survol dans Opera mais le reste est bon.

Chose est que j'ai besoin d'avoir un état «on» pour l'onglet chargé où il a le style renversé.

Jusqu'à présent, je n'ai pas été en mesure d'effectuer des changements sur un individu <TD>.

page en question est en développement à http://hiv411.dreamhosters.com/page.php

Merci beaucoup pour tout conseil!

Code de la table ressemble à:

<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 est comme ceci:

.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

ce que vous devez faire est de changer l'ordre du css, d'abord l'étiquette générale et les classes. Et en appliquant les mêmes classes table.tabs (de sorte que le CSS ne remplace pas les propriétés), vous pouvez économiser de l'espace mais pas écrire les mêmes propriétés deux fois dans .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

Ne devrait pas être .tabOn tdtd.tabOn? également .tabOn td a devrait être td.tabOn a

La façon dont vous l'avez maintenant serait pour <tr class="tabOn">