- ベストアンサー
firefoxでa:hoverのwidth、heigthが効かない
上手く表現できないのですが、ヘッダーのメニュー部分で、カーソルがリンク部分に行くと、背景画像が変わるようにしたいのですが、ＩＥ６と７ではイメージ通りになっていますが、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>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
結論としては「できないのが正しい」 アンカー(<a>タグ)ってインライン属性ですね widthやheightは指定できないのが筋です。 どうしてもというのであればdisplay:blockしてやる手も ありますが、floatなど指定する必要もあるので何かと面倒かも・・・ まあ、H4の中の要素であればいいのかなぁ・・
お礼
教えていただいたように、display:blockにしてみたところ、firefoxでも表示されるようになりました！ありがとうございました！
お礼
丁寧に教えていただきまして、ありがとうございます。 DOCTYPE宣言は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> となっています。 教えていただきましたように、display:blockを追加したところ、希望の表示になりました。 ご指摘のように、メニューはh4タグでなく、ulタグでマークアップした方が良いのですよね。まだまだ初心者で、不勉強が恥ずかしいです。 よりよいＨＰになるように、更に精進したいと思います。