firefoxでmargin-topが効かない

締切済

質問者：gonta5401
質問日時：2009/01/25 11:09
回答数：2件

下記のソースとCSSでHPを制作しています、
ナビゲーション<ul id="menu">その下に

<div class="title">としてimgを入れてます、
ナビゲーションと<div class="title">の間に<div class="title">側で
margin-top : 20px;を指定しました、IE6・7・8では希望通り表示されますがfirefoxではmargin-top : 20px;が無視されているのか
ナビゲーションと<div class="title">の間がくっついて表示されます。
どなたか解決策、間違いがありましたらご指導ください、お願いします。

ソース記述

<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>


<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;
}
以上宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2009/01/25 12:11

他のブラウザ、opera,safari等で確認すること。

原因はIEだと、
・・・すべてのブロックに border:solid 1px red;のようにborderを引いてみて、原因をつぶす。なお、IEにはどうしても解決できないバグがあるので、それでも情報の伝達に支障がないようにデザインすること。ハックは出来るだけ使わない・・ブラウザのバージョンごとにそれをしていたらたまらない。