CSSでテーブルのセルが、a:hover で背景を変わるようにしましたが、枠がちらついてしまいます。

テーブルのセルに、リンクのあるテキストをはって、
a:hoverで背景が変わるようにしたのですが、
hoverの状態でセルの外側だけ背景が変わらずに、hover状態でないときの背景がほんの少しちらついてしまいます。

table .a{border: 0px;background-color:red;;padding: 2px;width: 150px;}
table .a a:hover{border:0px;padding: 2px;width: 150px;background-color:orange;}
のようにすると、
hover状態で、セルの枠が、ほんの少しredのままになってしまいます。
http://www.smashingmagazine.com/2008/08/13/top-1 …
の 3.BOX　の例のように、hover状態できれいに背景の色が変わるようにしたいんですが、どう直せばいいでしょうか。よろしくおねがいいたします。

No.1 ベストアンサー 回答者： yambejp 回答日時： 2008/09/18 20:31

とりあえずこんな感じでどうでしょう

<style>
table .a{border: 0px;background-color:red;;padding: 0px;width: 150px;}
table .a a{display:block;border:0px;padding: 2px;width: 150px;}
table .a a:hover{background-color:orange;}
</style>
<table>
<tr>
<td class="a"><a href="#">test</a></td>
</tr>
</table>

この回答への補足

なんどもすいません。
重ねて質問したいのですが、Operaで見た場合に、テキスト部分だけhover状態で背景が変わり、セル中のテキストが無い部分は

IE7で見るとセル全体がリンクになるんですが、Operaの場合リンク部分はセル全体でなくて、テキスト部分のみになってしまうんですが、これはどうすれば改善できるのでしょうか。
お時間がありましたらこちらもお答えいただけると大変たすかります。

補足日時：2008/09/18 21:19

この回答へのお礼

迅速なご回答ありがとうございます。大変たすかります。きれいに枠が消えました。
.aのpadding を0にして、
.a a{diplay:block;padding:2px;}にするということでしょうか。
.aのときのpaddingが0になると、セルの中のテキストが詰まってしまうんですが、これも同時に改善するにはどうすればよいのでしょうか。
.aのpaddingを2pxにすると、hover状態の枠が復活してしまいます。
アホですいません。

お礼日時：2008/09/18 21:18

No.2 回答者： yambejp 回答日時： 2008/09/18 21:40

.aのクラスはアンカーにつけてもよいですか？

そうであればこんな感じで・・・

<style>
table .a{border: 0px;background-color:red;;padding: 0px;width: 150px;}
table a.a{display:block;border:0px;padding: 4px;width: 150px;}
table a.a:hover{background-color:orange;}
</style>
<table>
<tr>
<td><a href="#" class="a">test</a></td>
</tr>
</table>

この回答へのお礼

お返事遅くなりました。
勉強になります。ありがとうございました。

お礼日時：2008/09/19 21:36