IEでは指定の位置に配置してくれません

質問

添付図のようにしたいのですが、
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>

CSS
/* レイアウト設定ここから */

#pageBody {
width: 740px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: auto;
}

#header {
width: 740px;
height: 50px;
margin: 0px;
padding: 0px;
}

#topFlContens {
width: 740px;
height: 320px;
margin: 0px;
padding: 0px;
}

#box {
width: 740px;
height: 550px;
margin-top: 20px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 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 ul {
margin: 0px;
}

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

Web初心者のため、アドバイス頂けると幸いです。

回答No.1

naokita · ベストアンサー

positionは何の為？

#gNavi {
width: 560px;
margin-left: 220px;

この幅は、780pxだけど・・・

#gNavi ul {
margin: 0px;
}
デフォルトpaddingが効いている。

とりあえず、#gNaviの幅と#gNavi ulの幅と#gNavi liの隙間と、
#gNavi ulのpadding:0;の相互関係で元々の設計が出来ていないのでしょう・・・
応急処置として、
#gNavi ul　に、以下を設定。
padding:0 0 0 ○px;　←　の　○px に値を入れて微調整。

というより、根本から全体設計の見直しを。

補足

＞positionは何の為？
　　positionはflota設定時に必要なのかと思っていたためです・・・汗
　　アドバイスを見る限り必要なさそうですね＾＾；

応急処置やってみました！
○pxを40pxに設定してみると設置したいところにいってくれました＾＾

＞この幅は、780pxだけど・・・
自分の設計では
《header》740px内に《h1画像》幅180pxと《gNavi》幅560pxを設置、
《h1画像》と《gNavi》の間にスペース80pxを作りたいために《gNavi》をfloat:rightに
設定したのですが、IEではうまくいかなかったという流れです。。。;_;
《h1画像》と《gNavi》を分けた理由はスペースを作成するためには
分けてfloat:leftとrightにそれぞれ設定することによって、
両サイドにつめてくれて、スペースができると考えてみたためです。
それも個人的にはやり方があっているのか間違っているのかがわからず、
《h1画像(添付図左側のロゴ）》と《gNavi》を図のように横並びにするには
他の方法をとったほうがよいのでしょうか？

分析しにくい質問に丁寧なアドバイス有難うございました＾＾
アドバイス大変助かりました。
有難うございます。