IEとFirefoxでリンクの「hover」の状態が異なります。

質問

IEとFirefoxでリンクの「hover」の状態が異なります。
メニューに画像を使っているのですが、IEとFirefoxでは「hover」時のbackground-colorのかかり方が異なります。
IEだと画像全体にかかるのですが、Firefoxでは画像の下の方だけにしか色がつきません。
画像をテキストに変更すると、テキスト全体にきちんとかかります。
画像に問題があるのでしょうか？
どうすれば解決するのか教えてください。

以下にメニューのソースを載せておきます。

（HTML）
<table width="100%" height="40" cellspacing="0">
<tr>
<td width="100" ><a href="page1.html"><img src="menu1.gif" border="0" alt=""></a></td>
<td width="100" ><a href="page2.html"><img src="menu2.gif" border="0" alt=""></a></td>
<td width="100" ><a href="page3.html"><img src="menu3.gif" border="0" alt=""></a></td>
<td width="100" ><a href="page4.html"><img src="menu4.gif" border="0" alt=""></a></td>
<td width="100" ><a href="page5.html"><img src="menu5.gif" border="0" alt=""></a></td>
<td width="100" ><a href="page6.html"><img src="menu6.gif" border="0" alt=""></a></td>
<td width="100" ><a href="page7.html"><img src="menu7.gif" border="0" alt=""></a></td>
</tr>
</table>

（CSS）
a:hover { background-color: #000000;}

どうぞよろしくお願いします。

回答No.4

x_lady007 · ベストアンサー

#ANo.2 です。

補足だったので気づきませんでした。
最初の質問と内容が変わっていますので、こういう場合は新しいスレッドを立ててくださいね。そうすれば回答も得られやすいと思います。

以下、補足の回答ですが、

前回回答でaタグをブロック要素にしたので、aタグにpaddingを設定できます。
なので、tableの高さをなくし、
a{display:block;padding:30px 0;} のような感じで。

どうしてもtableの高さを固定したいというのであれば、正攻法ではありませんがtableの高さと同じ値をline-heightに設定することで対応可能です(単一行のみ)。
tableの高さが100pxであれば、
a{display:block;line-height:100px;} のような感じで。

お礼

ご回答ありがとうございます。
両方の方法で試してみました。
これ、使えますね。
貴重な情報をどうもありがとうございました。

回答No.3

x_lady007

#ANo.2です。

IE6・7が間違った解釈をしています(IE8は正常)。

以下のようにしてみるとよく分かりますが、通常インライン要素はテキストの高さ分しか高さがありません(厳密には高さはありません)。

■HTML
----------------------
<table width="100%" height="40" cellspacing="0">
<tr>
<td width="100"><a href="page1.html"><img src="menu1.gif" border="0" alt="">あああ</a></td>
<td width="100"><a href="page2.html"><img src="menu2.gif" border="0" alt="">あああ</a></td>
<td width="100"><a href="page3.html"><img src="menu3.gif" border="0" alt="">あああ</a></td>
</tr>
</table>
----------------------
■CSS
----------------------
a{border:1px solid #000000;}
a:hover{background-color:#000000;}
----------------------

お礼

ご回答ありがとうございます。
＞IE6・7が間違った解釈をしています(IE8は正常)。
わかりました。
a{border:1px solid #000000;}でインライン要素がどういうものかがわかりました。

回答No.2

x_lady007

a{display:block;}
a:hover{background-color:#000000;}

で直ると思います。
インライン要素は幅と高さがありませんので、通常このようなボタンの処理をしたい場合はブロック要素に変換します。
すべてのa要素をブロック要素に変換したくなければ任意の名前をつけてください。

お礼

ご回答いただきありがとうございます。
a{display:block;}でうまくできました。
でも、IEとFirefoxで異なるのはどうしてなのでしょうか？

補足

もう少し教えてください。
メニューボタンに「画像」を使っていますが、これを「テキスト」に変更すると、a{display:block;}でセルの横幅いっぱいに広がりますが、縦幅はテキストの高さぎりぎりになってしまいます。
テキストで縦幅もセルの高さいっぱいに広げる方法はあるのでしょうか？
もしおわかりでしたら教えていただけませんか？

回答No.1

yyr446

下の方だけにしか色がつかないのじゃなくて、隙間から色が見えてるのです。
CSSで、
a img {vertical-align:middle;}

お礼

ご回答いただきありがとうございます。
a img {vertical-align:middle;}で画像の中心（文字がある部分）に色がつきましたが、これでは画像全体に色がつきません。