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

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

解決済みの質問

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

divを3つ使い、CSSで指定した背景画像によって一つのボックスを作っています。
IE6で見たときは異常ないのですが、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;
}

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

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

投稿日時 - 2009-09-18 11:30:45

QNo.5299754

すぐに回答ほしいです

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

何がしたいのかソースからはいまいち読み取れませんが・・・
画像は背景として入れる必要があるんですか?
画像以外のものを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>

投稿日時 - 2009-09-18 12:05:17

お礼

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

投稿日時 - 2009-09-24 13:58:43

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

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

回答(1)

あなたにオススメの質問