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

解決済みの質問

FFにおけるDIVタグ間の隙間について

たびたびお世話になります。
自分なりにあちこち検索したのですが、解決できるものが見つかりませんでしたので、質問させていただきます。

今回初めてCSSを使ってHPを作成しているのですが、部分的に<DIV>~</DIV>と<DIV>~</DIV>の間に10px程の隙間が発生します。
IE系のブラウザでは特に問題ないのですが、Mozila系で再現されるようです。
どのようなタグを挿入、あるいは削除すれば解決できるでしょうか?

以下、該当部のタグになります。

【html】
<body>
<div id="header">
<a href="http://****.jp/">
<img src="../img/images/images/title.jpg"width="207"height="33">
</a>
</div>
<div id="topphot1">
<div id="topphot2">
<!-- TOP画像入れ替える時はここのファイルを変更。横711px縦150pxのもののみ -->
<img src="../img/topphoto.jpg" width="711px" height="150px" />
<!-- ↑↑↑ -->
</div>
<div id="q_menu">
<ul class="q_menu">
<li><a href="#"><img src="../img/icon_m.gif" width="23" heigh="23" /></a></li>
<li><a href="#"><img src="../img/icon_s.gif" width="23" heigh="23" /></a></li>
<li><a href="#"><img src="../img/icon_r.gif" width="23" heigh="23" /></a></li>
</ul>
</div>
</div>
<div id="m_menu">
<ul class="m_menu_ro">
<li><a href="#" class="bbs"></a></li>
<li><a href="#" class="battle"></a></li>
<li><a href="#" class="event"></a></li>
<li><a href="#" class="hunt"></a></li>
</ul>
</div>

【css】
#header{
padding:0 auto 0 auto;
margin:0 auto 0 auto;
background-color:#7fd137;
color:#ffffff;
width:800px;
height:33px;
}

#topphot1{
margin:0 auto 0 auto;
padding:0 auto 0 auto;
position:relative;
background-color:#edf2e9;
background-image:url(../img/images/HP_03.jpg);
background-repeat:no-repeat;
background-position:center;
color:#696969;
width:800px;
height:220px;
text-align:center;
}

#topphot2{
margin-top:8px;
padding-top:8px;
margin-left:auto;
margin-right:auto;
position:relative;
color:#696969;
width:711px;
height:150px;
text-align:center;
}

#q_menu{
position:absolute;
left:50px;
bottom:10px;
}
ul.q_menu{
width:69px;
height:23px;
margin:0px;
padding:0px;
}
ul.q_menu li{
float:left;
}

不慣れなもので、タグ自体がちょっと滅茶苦茶なカンジもするのですが…。

aタグ周囲の改行の削除、vertical-alignをbottomに設定するなどでは解消できませんでした。
よろしくお願いします。

投稿日時 - 2007-12-26 22:09:55

QNo.3629893

困ってます

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

>>> <div></div> に10px程の隙間が発生

どの div の間でしょうか?
このソースだと、body直下に3つ、ネストされているdivが2つあります。

このソースの、#header と #topphot1 の間をおっしゃっておられるのでしたら、それは
#topphot2{ margin-top: 8px;}
のせいです。div#topphot1に ネストしたdiv#topphot2 の画像の上マージンを取りたいのでしたら、padding-top: 16px; にして、margin-top は0pxにしてください。

これは、 "marginは、重なる場合に相殺される" という事なのです。

例えば、このスタイルシートに、
div#header{margin-bottom:10px;}
div#topphot1{margin-top:20px;}
と指定した場合、#header と #topphot1 の間は 10px+20px=30px ではなく、"20px"になります。

このソースで言うと、
div#header {margin:0px auto;}
div#topphot1{margin:0px auto;}
div#topphot2{margin-top:8px;padding-top:8px;}
#header と #topphot1の間(上下)にマージンはないので、上下はくっついて(重なって)います。
そして、#topphot1 と #topphot2の間に8px marginが入る。#header と #toppho1はくっついていますから、結果として、見た目は#header と #topphot2 の間が空いていることになります。解りますか?
これが、ブラウザの解釈の違い(バグとも言う)です。marginは、「中身がある要素まで、どこまでも相殺」されるのです。

そこから、#topphot2には padding-top:8px;指定がありますので、それは確保されています。

問題は、margin, border, width, float,などに関して、IE5.x, IE6(IE7も、らしい)のバグもありますし、ブラウザ毎、また、DOCTYPEスイッチで (CSS準拠かどうかは別にしても)挙動が異なる部分がある、ということなのです。コーディングの際に一番面倒な部分です。

わかりにくいかもしれません。図面付きの解説サイトなどもありますので、検索なさるとよろしいかと思います。

投稿日時 - 2007-12-27 02:03:51

お礼

回答ありがとうございました!

説明不足で申し訳ありません。ご指摘の通りの場所ですね。
お教えいただいたとおりに組みなおしたところ、解消できました。

バグについては色々聞き及んではいるのですが、自分で解決できないのが苦しいところです…。

とても助かりました。ありがとうございます。

投稿日時 - 2008-01-02 02:24:00

ANo.2

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

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

回答(2)

ANo.1

調べてみたら、

#topphot2{
margin-top:8px;

のmargin-topが原因でした。

#topphot2{
margin-top:0px;

で解決しました。

投稿日時 - 2007-12-27 01:44:05

お礼

回答ありがとうございます。

恐らくその辺りが原因なのだろうと思ったのですが、0pxにしてしまうと目的のマージンが取れなくなってしまうので、
どうしたらいいものかと悩んでいました。。。

投稿日時 - 2008-01-02 02:25:27

あなたにオススメの質問