FireFoxで見るとdiv間に隙間が・・・

質問

divを３つ使い、CSSで指定した背景画像によって一つのボックスを作っています。
ＩＥ６で見たときは異常ないのですが、FireFoxで見ると、
それぞれ隙間が開いてしまい、背景画像が途切れて見えます。

同じような使い方をしている箇所にすべて同じ事が起きています。
Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか？
直す方法があればご指導よろしくお願い致します＞＜

<div id="medi-top">
</div>
<div id="media">
<p>何行かにわたり、画像や文章が入力されています</p>
</div>
<div id="medi-bottom"></div>

#medi-top {
background-image: url(img/media_01.jpg);
background-repeat: no-repeat;
height: 50px;
width: 680px;
margin-top: auto;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
line-height: 0;
}
#media {
width: 600px;
background-image: url(img/media_03.jpg);
background-repeat: repeat-y;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-right: 40px;
padding-left: 40px;
}
#medi-bottom {
background-image: url(img/media_05.jpg);
background-repeat: no-repeat;
height: 35px;
width: 680px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 50px;
margin-left: auto;
}

本や検索などで同じようなものを探して対処してみたのですが、
直らなかったため質問させていただきます。

よろしくお願い致します。

回答No.1

one-moment · ベストアンサー

何がしたいのかソースからはいまいち読み取れませんが・・・
画像は背景として入れる必要があるんですか？
画像以外のものをfloatで浮遊させて表示するというのも一つですよ。
BGに画像を入れてるからずれるんじゃないでしょうか？
例えば

<!--/ その他ソース群ここから /-->
<div style="float:left;margin:0px;padding:0px;position:relative;top:0px;left:0px">
浮遊化した内容がここに並びます。
positionの後にあるtopとleftの調整により、画像の上などに文字を持ってくることもできます。
</div>
<!--/ その他ソース群ここまで /-->

<img src="img/media_01.jpg"><br>
<img src="img/media_03.jpg"><br>
<img src="img/media_05.jpg">

とすれば隙間はできないはずです。

DIVタグはブロック要素の指定（改行を伴う）なので、spanタグ（インライン要素。改行を伴わない）でやってみてはいかがでしょうか？

<span id="medi-top">
</span>
<span id="media">
<p>何行かにわたり、画像や文章が入力されています</p>
</span>
<span id="medi-bottom"></span>

お礼

お返事が遅くなってしまいすみません。
確かに画像を背景にしなくても希望通りのことができました！
div間はやはり隙間ができてしまうので分けずにやるのがいいですね…。
ご丁寧な回答ありがとうございました。