- ベストアンサー
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）
- 専門家の回答
質問者が選んだベストアンサー
> ＩＥ６と７ではイメージ通りになっていますが、 と仰っていますが、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がクリアされていませんので、どこかでクリアしてやらないと、以下に続く要素がヘッダーの右側に回り込みます。
その他の回答 (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タグでマークアップした方が良いのですよね。まだまだ初心者で、不勉強が恥ずかしいです。 よりよいＨＰになるように、更に精進したいと思います。