ulのマージンについて

質問

ulにマージンを入れたのですが、数値通りのマージンが入りません。
--------html------------
<div id="wrapper">
<div id="logo"></div>
<ul id="top-menu">
<li id="top-menu-home"><a href="#">Home</a></li>
<li id="top-menu-syokai"><a href="#">園の紹介</a></li>
<li id="top-menu-nagare"><a href="#">一日のながれ</a></li>
<li id="top-menu-gyoji"><a href="#">年間行事</a></li>
<li id="top-menu-contact"><a href="#">所在地・問合せ</a></li>
</ul>
</div>
--------css---------
#logo { float:left; width:119px; height:130px; margin:0 0 0 2px; background:url(../img/common/logo.gif) no-repeat;}
ul#top-menu { width:500px; overflow:hidden; margin-top:20px; margin-left:179px;}
ul#top-menu li {float:left; display:block;}
ul#top-menu li a {display:block; overflow:hidden; height:0px; padding-top:100px; width:100px; background-repeat:no-repeat;}
#top-menu-home a {background:url(../img/common/top-menu/home.gif) 0 0;}
#top-menu-syokai a { background:url(../img/common/top-menu/syokai.gif) 0 -100px;}
#top-menu-syokai a:hover { background-position:0 0;}
#top-menu-nagare a {background:url(../img/common/top-menu/nagare.gif) 0 -100px;}
#top-menu-nagare a:hover {background-position:0 0;}
#top-menu-gyoji a {background:url(../img/common/top-menu/gyoji.gif) 0 -100px;}
#top-menu-gyoji a:hover {background-position:0 0;}
#top-menu-contact a {background:url(../img/common/top-menu/contact.gif) 0 -100px;}
#top-menu-contact a:hover {background-position:0 0;}
----------------------------
ul#top-menuのmargin-leftです。
どうしてか分からず、困っています。
ご存じの方がいらっしゃいましたら、よろしくお願いします。

回答No.2

metametamu · ベストアンサー

floatとdisplay:inline;は定石としてセットにしておくといいと思います。
IE6ではfloatさせた方向にマージンを取るとマージンが2倍になるバグがあるのですが、これをdisplay:inline;を指定するだけで回避できます。

お礼

丁寧にご説明頂いて、ありがとうございました。
CSS初心者ですので、またここで質問させて頂く事があると思います。
その際にも是非、またよろしくお願い致します。
ありがとうございました。

回答No.1

metametamu

ul#top-menuもfloatさせる方が計算しやすいんじゃないでしょうか。
#wrapperの方にoverflow:hidden;を指定する方が組みやすいと思います。
あと、floatを指定した要素にはdisplay:inline;もあわせて指定しておくといいですよ。

補足

ありがとうございます。
ul#top-menuにfloatを入れたらできました。
display:inlineなくてもFireFoxでは問題ないのですが、入れておくべきなのでしょうか？
度々すみませんが、よろしくお願いします。