上手く表現できないのですが、ヘッダーのメニュー部分で、カーソルがリンク部分に行くと、背景画像が変わるようにしたいのですが、IE6と7ではイメージ通りになっていますが、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>
No.2ベストアンサー
- 回答日時:
> IE6と7ではイメージ通りになっていますが、
と仰っていますが、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がクリアされていませんので、どこかでクリアしてやらないと、以下に続く要素がヘッダーの右側に回り込みます。
丁寧に教えていただきまして、ありがとうございます。
DOCTYPE宣言は
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
となっています。
教えていただきましたように、display:blockを追加したところ、希望の表示になりました。
ご指摘のように、メニューはh4タグでなく、ulタグでマークアップした方が良いのですよね。まだまだ初心者で、不勉強が恥ずかしいです。
よりよいHPになるように、更に精進したいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
Media Queries 4 で 非推奨とな...
-
form input テキストを上下中央...
-
中点「・」の改行について
-
CSSでborderの長さを指定、また...
-
Mozilla Firefoxで画像がちゃん...
-
【HTML】【CSS】【Swiper】 元...
-
css初心者 フレックスボックス...
-
テーブル内の画像をマウスオー...
-
footer を横幅いっぱいに広げる...
-
CSSで背景画像を一番下にもって...
-
テーブルのセル間に余白が空い...
-
iframe 内の画像を自動縮小させ...
-
widthやheightの数値に単位(px...
-
CSSがなぜかfont-sizeだけ効か...
-
画像イメージの上下左右、欲し...
-
IEとFirefoxの見え方の違いを揃...
-
レスポンシブコードの意味なの...
-
HTMLで、リストの一番上だけ、...
-
【CSS】ヘッダーの高さが不明の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
W3Cのソースコードの検証サービ...
-
form input テキストを上下中央...
-
CSSでボックスのheightが0になる
-
スクロールボックスを中央に配...
-
表示倍率を変えるとレイアウト...
-
【CSS】ヘッダーの高さが不明の...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
CSSで指定した背景画像にリンク...
おすすめ情報