みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

IEでCSSによる背景画像の高さが伸びる原因は?

2枚の画像で、リンクを行おうとした場合、
div内にh2とulでリンクを行っています。
ところが、高さ(hight)を全てに指定しているにも関わらず、
divが引き伸ばされて、background-imageの不要な部分まで出てきてしまいます。
borderを入れると全体を挟んでいるDIVが何かによって引き伸ばされていますが、なぜIEだと引き伸ばされているのでしょうか?
FIREFOXだと綺麗に表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style>
<!--
*{
margin:0;
padding:0;
}

h2,ul{
text-indent:-9999px;
list-style:none;
}
h2 a{
width:175px;
height:28px;
display:block;
}
ul a{
display:block;
width:175px;
height:24px;
}
ul li{
padding:0;
margin:0;
}
.float_right{
float:right;
}
.mgn_btm7{
margin-bottom:7px;
}
div#NAVIBAR{
width:175px;
margin-top:43px;
height:398px;
background-image:url(image/test-a.gif);
background-repeat:no-repeat;
border:1px #FF0000 solid;
}
h2 a:hover{
background-image:url(image/test.gif);
background-position:0 0;
background-repeat:no-repeat;
height:23px;
}
ul a:hover{
background-image:url(image/test.gif);
background-repeat:no-repeat;
height:23px;
}
ul a#E:hover{
background-position:0 -28px;
}

ul a#F:hover{
background-position:0 -52px;
}

ul a#G:hover{
background-position:0 -76px;
}

ul a#H:hover{
background-position:0 -100px;
}

ul a#I:hover{
background-position:0 -124px;
}

ul a#J:hover{
background-position:0 -155px;
}

ul a#K:hover{
background-position:0 -179px;
}

ul a#L:hover{
background-position:0 -203px;
}

ul a#M:hover{
background-position:0 -227px;
}

ul a#N:hover{
background-position:0 -251px;
}

ul a#O:hover{
background-position:0 -275px;
}

ul a#P:hover{
background-position:0 -299px;
}

ul a#Q:hover{
background-position:0 -323px;
}

ul a#R:hover{
background-position:0 -347px;
}

ul a#S:hover{
background-position:0 -371px;
}



-->
</style>
</head>

<body>
<div id="NAVIBAR" class="float_right">
<h2><a href="#">タイトル</a></h2>
<ul class="mgn_btm4">
<li><a href="#" id="E">ああああああ</a></li>
<li><a href="#" id="F">いいいいいい</a></li>
<li><a href="#" id="G">うううううう</a></li>
<li><a href="#" id="H">ええええええ</a></li>
<li class="mgn_btm7"><a href="#" id="I">おおおおおおお</a></li>
<li><a href="#" id="J">かかかかかか</a></li>
<li><a href="#" id="K">きききききき</a></li>
<li><a href="#" id="L">くくくくくく</a></li>
<li><a href="#" id="M">けけけけけけ</a></li>
<li><a href="#" id="N">ここここここ</a></li>
<li><a href="#" id="O">ささささささ</a></li>
<li><a href="#" id="P">しししししし</a></li>
<li><a href="#" id="Q">すすすすすす</a></li>
<li><a href="#" id="R">せせせせせせ</a></li>
<li><a href="#" id="S">そそそそそそ</a></li>
</ul>
<hr>
</div>
</body>
</html>

投稿日時 - 2009-07-24 19:04:57

QNo.5152358

困ってます

質問者が選んだベストアンサー

ソースをそのままローカルで試してみました。
微妙に下部の余白が(入ったり入らなかったり)違うのですが、その部分でしょうか…?

IE6、IE7、IE8で検証してみました。
IE6が一番余白が大きく、次いで7。
8はFirefoxと同じ表示になりますね。

ご質問のソースだけで見ると、原因はリストタグの下にある「<hr>」のようです。これがなければ、こちらでは同じ表示になります。

<hr>はブラウザによって実装に微妙な違いがあるので、扱いづらいです。どうしてもということでなければ、<hr>を使わない違った方法で組まれてみてはいかがでしょうか。
(例えば、単純にラインを入れるだけの目的でしたら、<ul>のbottomにborder指定するなど。)

投稿日時 - 2009-07-25 03:14:13

お礼

ご指摘の通り、hrですね。
マークアップを意識してやっていたので、divの外に設けるルールで作ることにしました。
CSSによる検証ばかりに気を取られていたので、htmlのhrを疑いませんでした。
ご指摘ありがとうございました。

投稿日時 - 2009-07-27 10:46:06

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問