FireFoxで確認するとliがずれます

質問

webページを作成していてリスト部分が下にずれてしまうのに困っています。

添付図のようにIEで見るとちゃんと置きたい位置に収まってくれるのですが、
firefoxでは収まってくれません。
ご教授頂けたら幸いです。

タグ
<div id="header">
<h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1>
<div id="gNavi">
<ul>
<li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li>
<li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li>
<li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li>
<li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li>
</ul>
</div><!-- /gNavi -->
</div>

スタイルシート
#header {
width: 740px;
height: 50px;
margin: 0px;
padding: 0px;
}

#header h1 {
width: 180px;
height: 50px;
margin-top: 0px;
margin-right: px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
float: left;
position: absolute;
}

#gNavi {
list-style-type: none;
width: 560px;
height: 50px;
margin-top: 0px;
margin-right: 0px;
margin-left: 220px;
margin-bottom: 0px;
float: right;
position: absolute;
}

#gNavi li {
list-style-type: none;
margin: 0px;
padding: 0px;
float: left;
}

素人作成のため乱雑の作成内容で恐縮ですが、
アドバイス頂けると幸いです。

回答No.1

Yama-tani · ベストアンサー

#gNavi ul{
margin:0px;
}

を加えてみてください。ブラウザごとにulのmarginの初期値が違います。
数値を入れ、統一されますように。

または、cssはそのままで、
<div id="gNavi">のdivを止められ<ul>タグに id="gNavi"を付けられますように。