IEでだけ1つのDivがずれる。

質問

現在スタイルシートを使ってレイアウトをしているのですが、
なぜかIEだけ一部のDIVのセンタリングがうまくいきません。
ヘッダー、メニューは共に中央揃えなのですが、その下のメインDIVのみ
10pxくらいだけ左側にずれます。Firefoxではきちんと揃って表示されています。
色々試したのですがどうしても解決方がわかりません。よろしくお願いします。

css
body{
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

#header{
display: box;
margin: 0px;
padding: 10px 0px 15px 0px;
background-image: url(header.gif);
background-repeat: repeat-x;
background-position: center bottom;
}

#header div{
width: 780px;
display: box;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding:0px;
}

#menu {
clear: both;
margin: 0px;
padding: 0px;
background-image: url(menu-bg.gif);
background-repeat: repeat-x;
height: 50px;
}

.main{
clear: both;
margin: 0px auto 0px auto;
padding:0px;
text-align: left;
width: 780px;
bottom: 0px;
}

#menu ul{
width: 780px;
margin: 0px auto 0px auto;
padding: 0px;
height: 50px;
overflow: hidden;
}

ヘッダー、メニュー共に、背景画像を画面いっぱい横並びにしたいため
その内の要素のみをセンターに寄せる形にしています。
htmlでは上記のdiv(ヘッダー・メニュー・メイン)を縦に三つ並べています。

回答No.3

askaaska · ベストアンサー

HTMLありがとう
でも私の環境では特にずれて表示されなかったわ
困ったわね

補足

ありがとうございます。
私も今までそんな事はなかったので不思議で．．．
IEとSleipnirはなぜかずれるんです。丁度20pxだけ左にずれるみたいで。

回答No.2

k0021

この情報だけでは分からないですが
mainとmenu ulのmargin: 0px auto 0px auto;は不要と思いますが
bodyでmargin-left: auto;margin-right: autoを指定いるので又mainとmenu ulのmargin: 0px auto 0px auto;を指定しているの

補足

確かにそうですよね！
ブラウザによって位置ずれするのが嫌でとりあえず何でもかんでも
指定する癖がついてました．．．。気をつけます。
ありがとうございます！

回答No.1

askaaska

この情報だけでは分からないわね。
再現できないので
再現できる最小のHTMLを書いて見てくれないかしら。

補足

すみません。そうですよね。以下html内容です。

<div id="header"><!--ヘッダー-->
<div>
<IMG src="../gateway-logo3.gif" width="292" height="51" border="0" style="float:left;">
<br clear="all">
</div>
</div><!--ヘッダー-->
<div id="header-2"><!--ヘッダ2ー-->
<div>
<IMG src="../gateway-puestion.gif" width="548" height="113" border="0" style="float:left;">
<br clear="all">
</div>
</div><!--ヘッダ2ー-->
<div id="menu"><!--メニューー-->
<ul>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</div><!--メニューー-->
<div class="main">
ここだけなぜか10pxくらい左にずれる…
</div>

すみませんが、よろしくお願いします。
firefoxでは希望通りなのですが．．．