CSSテクニックコミュのマージンがブラウザにより空いたり空かなかったり。

今までtableでレイアウトしており、CSSは未熟者です。
CSSでレイアウトしているのですが、マージンのとり方がわかりません。

div#headerとdiv#mainimgの間に10pxのマージンを作るため、
div#mainimgにmargin-bottom: 10px;としています。

IE6とopera7は問題ないのですが、
netscape7ではマージンが全くきかず、
firefoxもマージンがきかず、さらにdiv#headlineの下側に隙間が
できてしまいます。

いろいろと試してはいるのですが、上手くいきません。
よろしくお願いいたします。

----------------------------------------------------

body {
background-color: #ffffff;
color: #333333 ;
font-family: "Osaka","ＭＳＰゴシック";
font-size: 0.75em;
line-height: 150%;
margin: 0px;
padding: 0px;
text-align: center;
}

div#headline {
width: 768px;
margin: 0 auto;
text-align: left;
}

div#container {
width: 754px;
margin: 0 auto;
text-align: left;
}

div#header {
width: 754px;
}

div#headerlogo {
float: left;
width: 149px;
}

div#headernav {
margin-left: 158px;
}

div#headernav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

div#headernav li {
float: left;
}

div#mainimg {
clear: both;
margin-top: 10px;
margin-left: 0px;
width: 747px;
}

p {
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

img {
border: none;
}

----------------------------------------------------

<html>
<body>
<div id="headline">
<p><a id="top" name="top"><img src="hdbar.gif" alt="*" width="768" height="4" /></a></p>
</div>
<div id="container">
<div id="header">
<div id="headerlogo"><a href="index.html"><img src="logo.gif" alt="" width="149" height="42" /></a></div>
<div id="headernav">
<ul>
<li><a href="index.html"><img src="nav_homo.gif" alt="" width="75" height="31" /></a></li>
<li><a href="product/index.html"><img src="nav_product.gif" alt="" width="75" height="31" /></a></li>
<li><a href="business/index.html"><img src="nav_business.gif" alt="" width="75" height="31" /></a></li>
<li><a href="company/index.html"><img src="nav_company.gif" alt="" width="75" height="31" /></a></li>
<li><a href="place/index.html"><img src="nav_place.gif" alt="" width="75" height="31" /></a></li>
<li><a href="recruit/index.html"><img src="nav_recruit.gif" alt="" width="75" height="31" /></a></li>
<li><a href="contact.html"><img src="nav_contact.gif" alt="" width="77" height="23" /></a></li>
<li><a href="sitemap.html"><img src="nav_sitemap.gif" alt="" width="69" height="23" /></a></li>
</ul>
</div>
</div>
<div><img src="main_img01.jpg" alt="" width="747" height="179" /></div>
</div>
</body>
</html>

コメント(3)

最初
全て
最新の40件

[1] mixiユーザー 03月24日 17:13

えーと、HTMLにmainimgが書かれていないようですけれど･･･？

[2] mixiユーザー 03月24日 17:24

(ﾟｰﾟ)(｡_｡)ｳﾝｳﾝ
<div id="mainimg">が見当たりません！船長！

でも、div#mainimg で、
margin-top: 10px;
ではなく、
padding-top: 10px;
のほうがうまくいきそう…

[3] mixiユーザー 03月24日 18:35

＞えーと、HTMLにmainimgが書かれていないようですけれど･･･？

すみません。下から4行目のdivです。

＞ padding-top: 10px; のほうがうまくいきそう…

padding-topでうまくいきました！！！！！
marginとpaddingの使い分けってあるんですね。
難しいですね...。

また質問させていただきます。
ありがとうございました。

ログインすると、みんなのコメントがもっと見れるよ