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

解決済みの質問

IEとFirefoxの表示の違い

テーブルを使わずCSSで枠を作り、中に画像を入れてその右側に文章を表示させたいのですが、ブラウザによって表示が異なり困っています。

外部スタイルシートに以下を記載して、

body {width:600px;}
.img{float:left;}
div.box {
border: 1px solid #000 ;
padding:10px;
margin:10px;
}


以下のHTMLをブラウザで表示すると、枠が重なって表示されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>test</title>
</head>
<body>
<div class="box">
<h4>title</h4>
<div class="img"> <img src="img1.gif" width="200" height="400" alt="img" /></div>
text text text text text text<br />
</div>
<div class="box">
<h4>title</h4>
<div class="img"><img src="img1.gif" width="200" height="400" alt="img" /></div>
text text text text text text<br />
</div>
</body>
</html>

そこで、

スタイルシートのdiv.boxに

height:100% ;

を追加すると、IEでは画像の高さまで枠が広がりますが、Firefoxでは重なったままで変化しません。

画像の高さをpxで指定してやれば両方表示できますが、高さの設定を特にしないでIEとFirefoxで同じように表示する方法がありましたら教えてください。
よろしくお願いします。

投稿日時 - 2006-05-23 23:27:00

QNo.2170922

困ってます

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

No.1です。
すみません、HTML部分のコードが間違っておりました。

下記に訂正いたします。

HTML ==================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>test</title>
</head>
<body>
<div class="box">
<h4>title</h4>
<!-- 左寄せする部分/ -->
<div class="img"> <img src="img1.gif" width="200" height="400" alt="img" /></div>
<!-- /左寄せする部分 -->
<!-- 右に回りこむ部分/ -->
text text text text text text<br />
<!-- /右に回りこむ部分 -->
<!-- 回り込み解除部分/ -->
<div class="clear"></div> ←コレを追加してください
<!-- /回り込み解除部分 -->
</div>
<div class="box">
<h4>title</h4>
<div class="img"><img src="img1.gif" width="200" height="400" alt="img" /></div>
text text text text text text<br />
</div>
</body>
</html>

投稿日時 - 2006-05-25 17:54:28

お礼

教えていただいた方法で解決できました。
たいへん参考になりました。
ありがとうございました。

投稿日時 - 2006-05-25 22:52:39

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

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

回答(2)

ANo.1

こんにちは。

恐らくfloatを解除していないので、ブラウザがずっと回り込みしてると解釈して、
高さが反映されてないんだと思います。

回り込みを解除させたい場所にclearを指定すれば大丈夫です。


CSS ==================================================

body {width:600px;}
.img{float:left;}
div.box {
border: 1px solid #000 ;
padding:10px;
margin:10px;
}
.clear {clear:both;} ←コレを追加してください

HTML ==================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>test</title>
</head>
<body>
<div class="box">
<h4>title</h4>
<!-- 左寄せする部分/ -->
<div class="img"> <img src="img1.gif" width="200" height="400" alt="img" /></div>
<!-- /左寄せする部分 -->
<!-- 右に回りこむ部分/ -->
text text text text text text<br />
<!-- /右に回りこむ部分 -->
<!-- 回り込み解除部分/ -->
<div style="clear:left;"></div> ←コレを追加してください
<!-- /回り込み解除部分 -->
</div>
<div class="box">
<h4>title</h4>
<div class="img"><img src="img1.gif" width="200" height="400" alt="img" /></div>
text text text text text text<br />
</div>
</body>
</html>

投稿日時 - 2006-05-25 15:13:25

あなたにオススメの質問