電子書籍の厳選無料作品が豊富！

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に設定するなどでは解消できませんでした。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： goulan
  • 回答日時：

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



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

このソースの、#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準拠かどうかは別にしても）挙動が異なる部分がある、ということなのです。コーディングの際に一番面倒な部分です。

わかりにくいかもしれません。図面付きの解説サイトなどもありますので、検索なさるとよろしいかと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

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

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

通報する
お礼日時：2008/01/02 02:24

No.1

  • 回答者： kazumero
  • 回答日時：

調べてみたら、



#topphot2{
margin-top:8px;

のmargin-topが原因でした。

#topphot2{
margin-top:0px;

で解決しました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

通報する
お礼日時：2008/01/02 02:25

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報