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 回答日時： 2010/04/20 09:48

HTMLありがとう

でも私の環境では特にずれて表示されなかったわ
困ったわね

この回答への補足

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

補足日時：2010/04/22 03:38

No.2 回答者： k0021 回答日時： 2010/04/19 22:41

この情報だけでは分からないですが

mainとmenu ulのmargin: 0px auto 0px auto;は不要と思いますが
bodyでmargin-left: auto;margin-right: autoを指定いるので又mainとmenu ulのmargin: 0px auto 0px auto;を指定しているの

この回答への補足

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

補足日時：2010/04/20 02:10

No.1 回答者： askaaska 回答日時： 2010/04/19 16:25

この情報だけでは分からないわね。

再現できないので
再現できる最小の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では希望通りなのですが．．．

補足日時：2010/04/20 02:04