firefoxでa:hoverのwidth、heigthが効かない

Question

上手く表現できないのですが、ヘッダーのメニュー部分で、カーソルがリンク部分に行くと、背景画像が変わるようにしたいのですが、ＩＥ６と７ではイメージ通りになっていますが、firefoxでは、カーソルがリンク部分に来たとき、a:hoverで指定したwidthとheightの大きさではなく、文字部分の背景だけが変わっています。また、firefoxではpaddingの指定も効いていないみたいです。
色々と調べながら作っているのですが、知識が足りず、どの部分に問題があるのか、ご指摘いただけましたら嬉しいです。
-css-
#header{margin:0px;
background-image:url(gazou.gif);
padding:0px;
width:800px;}

#header h4{float:left;
font-size:130%;
text-align:center;
background-image:url(gazou.gif);
width:159px;
margin:0px;
height:32px;
white-space:nowrap;
overflow:hidden;}

#header h4 a{text-decoration:none;
color:#000064;
height:32px;
padding-top:8px;
padding-bottom:6px;
white-space:nowrap;}

#header a:hover{text-decoration:underline;
background-image:url(gazou2.gif);
color:green;
width:159px;
height:32px;
margin:0px;
white-space:nowrap;}

-html-
<div id="header"><A href="a.html"><IMG src="topgazou.jpg" width="800" height="101" border="0"></A><br>
<h4><A href="b.html"> ・・・・・</A></h4>
<h4><A href="c.html"> ・・・・・</A></h4>
<h4><A href="d.html"> ・・・・・</A></h4>
<h4><A href="e.html"> ・・・・・</A></h4>
<h4><A href="f.html"> ・・・・・</A></h4>
</div>

abril · Accepted Answer

> ＩＥ６と７ではイメージ通りになっていますが、

と仰っていますが、DOCTYPE宣言はどうしておられますか？提供されたソースをそのままコピペして再現してみましたところ、DOCTYPE宣言の記述がない（無論NGです）場合は、質問者様と同様になりましたが、ソースがそのままでもHTML4.01 StrictなどのDOCTYPE宣言をするとIE6/7でもwidth/heightは適用されない状態になりましたので。

以下はとりあえず、HTML4.01 Strictにして検証してみた結果です。
ANo.1様の回答と一部被りますが、#header a:hover {（省略）}の指定に"display: block;"を追加すれば一応ご希望の表示になる事はなります。
ただし、問題点がいくつかあります。

これは構成・内容からしてメニュー（ナビ）ですね。「見出し」とはちょっと言えないので、そもそもh4タグでマークアップする事自体頂けません。上記の様な構造であれば、通常はulタグでマークアップするのが順当です。
また、上記ソースはヘッダー部分、という事はこれがbody内の一番最初に出てくる部分だと思いますが、h4の前にh1～h3は存在してますか？
h(n)タグは「見出し」であり、1から順番にレベルというものがありますので、いきなり4から始まる文書というのは非論理的です。
それから、上記CSSではh4で設定したfloatがクリアされていませんので、どこかでクリアしてやらないと、以下に続く要素がヘッダーの右側に回り込みます。

yambejp · Answer

結論としては「できないのが正しい」
アンカー(<a>タグ)ってインライン属性ですね
widthやheightは指定できないのが筋です。

どうしてもというのであればdisplay:blockしてやる手も
ありますが、floatなど指定する必要もあるので何かと面倒かも・・・
まあ、H4の中の要素であればいいのかなぁ・・

firefoxでa:hoverのwidth、heigthが効かない

> ＩＥ６と７ではイメージ通りになっていますが、

結論としては「できないのが正しい」

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング