IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）

質問

こんにちは、質問させて下さい。
現在　li　タグを使って、メニュー（画像）を作っていたのですが、
IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。
マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。

どうぞご回答お願いいたします。
以下は、そのliに関連するCSSと、ソースです。

■CSS
#div{
width: 458px;
float: left;
text-align: center;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #333333;
border-bottom-color: #333333;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 15px;
margin-right: auto;
margin-left: auto;
padding-left: 10px;
}

#div ul{
list-style-type:none;
display: block;
width: 432px;
text-align: center;
margin: 0px;
}
#div li {
float: left;
height: 200px;
width: 140px;
margin-right: 4px;
margin-bottom: 10px;
margin-top: 0px;
margin-left: 0px;
}

#div li img{
border:none;

■html
<div>
<ul>
<li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li>
<li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li>
<li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li>
<li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li>
<li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li>
<li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li>
</ul>
</div>

宜しくお願いいたします。

回答No.2

leap_day · ベストアンサー

こんにちは

<ul>無しでもリスト表示は出来るのだけど一緒につけないといけないみたいなので以下のようにすれば左の余白はなくなりました

<style type="text/css">
#div{
width: 432px;
float: left;
border-width: 2px 0px;
border-style: dotted none;
border-color: #333333;
padding: 10px;
padding-bottom:0px;
}

#div li {
list-style-type:none;
float: left;
height: 200px;
width: 140px;
margin:0px 4px 10px 0px;
}
#div ul{
margin:0px;
padding:0px;
}
#div li img{
border:none;
}
</style>
<div id="div">
<ul>
<li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li>
<li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li>
<li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li>
<li><a href="4.html"><img src="image/menu4.jpg" alt="品"></a></li>
<li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li>
<li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li>
</ul>
</div>

お礼

初めまして、ご親切にご回答ありがとうございました！

教えて頂いたＣＳＳを使い、若干の微調整を加えたら真中に表示する事も出来ました。

まだＣＳＳを流し込んでしまっただけなので、何処が違っていたのか確認はしていないのですが、ゆっくり見比べてミスを納得していこうと思います。

本当にどうもありがとうございました。

回答No.1

MAN_MA_RUI

えーと、とりあえずこれ。（あとで何か補足するかも知れません。）
http://www.mozilla.gr.jp/standards/webtips/webtips0034.html

お礼

参考サイトのご提示ありがとうございます！
この件に限らず、色んな疑問点が分かりやすそうでいいサイトを教えていただきました。ありがとうございました！