firefoxでmargin-topが効かない
下記のソースとCSSでHPを制作しています、
ナビゲーション<ul id="menu">その下に
<!-- content -->
<div class="title">としてimgを入れてます、
ナビゲーションと<div class="title">の間に<div class="title">側で
margin-top : 20px;を指定しました、IE6・7・8では希望通り表示されますがfirefoxではmargin-top : 20px;が無視されているのか
ナビゲーションと<div class="title">の間がくっついて表示されます。
どなたか解決策、間違いがありましたらご指導ください、お願いします。
ソース記述
<!-- menu -->
<ul id="menu">
<li id="mnu1"><a href="index.html" id="index.html" name="index.html" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'menu/menu1.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'menu/menu01.gif');"><img src="menu/menu1.gif" width="114" height="44" alt="HOME" name="_HPB_ROLLOVER1" /></a></li>
以下省略
</ul>
<!-- /menu -->
<!-- content -->
<div class="title"><img src="img/titlebar.gif" width="772" height="37" alt="楽しいケーキ作り" />
<h2>まずは生地作りから</h2>
<p>●********** <br />
<p>
</div>
CSS記述
ul#menu{
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
padding: 0px;
}
ul#menu li{
float : left;
list-style-type : none;
.title{
margin-left : 14px;
margin-bottom : 5px;
margin-top : 20px;
width : 772px;
}
.title h2{
font-size : 15px;
padding-top : 12px;
padding-left : 23px;
margin-bottom : 20px;
font-weight : bold;
font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif;
margin-top : -40px;
}
.title p{
font-size : 14px;
color : #ffffff;
padding-left : 20px;
line-height : 1.6;
margin-bottom : 10px;
margin-top : 0px;
width : 772px;
font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif;
letter-spacing : 1px;
}
以上宜しくお願いします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ありがとうございます。間を空けることができました。footerのmargin-topが適用されず、menuとmainでmargin-bottomが適用できた理由はなぜなんでしょうか？