カスタム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

のためになる必要がありtd.tabOn a

方法でなければなりません。同じクラスのtable.tabsを適用すると、スペースを節約できますが、.tabOnに同じプロパティを2回書くことはできません。

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 tdはtd.tabOnではないでしょうか？ また.tabOn td aは、あなたが今何をしなければならないことは、CSSのため、最初の一般的なタグとクラスを変更され<tr class="tabOn">