CSSを使ってのLIST表示

質問

CSSを使ってLIST表示を以下のようにしているのですが、

ul.ref {
margin: 0 20px;
padding: 0;
}

.ref li {
margin: 0 0 5px 0;
padding: 2px 0 2px 20px;
list-style-type: none;
font-weight: bold;
color: #03C;
background: #DDD url(../img/arrow.gif) no-repeat;
background-position: 0.5% 55%;
}

IEとFirefoxで表示の差が出て困っています。Firefoxの方が自分の思ったとおりに表示されてます。

参考ページ
http://canada.ciao.jp/life/share.html

IEでもFirefoxと同じように表示させるには、一体上記CSSのどの部分を修正すべきなのでしょうか？それともIE用にCSSを書き換えないとだめなのでしょうか？

また、追加質問で恐縮なのですが、上記参考ページでもう1点、IEとFirefoxの表示の違いがあり、ちょっと困っています。ページ右側にある広告枠なんですが、IEだとFirefoxよりちょっと下側に表示されます。

#right {
margin: 20px 20px 0 600px;
padding: 10px 0 20px 0;
text-align: center;
}

おそらく、上のCSSのせいなのでしょうが、この20pxを失くすと、これまたおかしくなりで、困っています。

アドバイスよろしくお願いいたします。

回答No.2

rainbowsix

2個目の質問に対して：
いっそのこと、#rightもfloatかましちゃったらいかがでしょう？
#right{
float:left;
width:180px;
margin:20px 20px 0px 0px;
padding:10px 0px 20px 0px;
text-align:center;
display:inline;
}
上記のようにして、マージンやらパディングやらを触ってみてください。確かFirefoxなどではfloatした要素の直後あたりは、上マージンが効かないなんていう仕様があった気がします。また、親要素にwidthの指定があるなしでもレンダリングが変わることがあります。フロート要素に横マージンを設ける場合、display:inline;は必須。コレが無いとIEでは横マージンを2倍取ってしまいます（バグ）。

補足

試してみたのですが、残念ながら結果同じでした…。

>display:inline;は必須。コレが無いとIEでは横マージンを2倍取ってしまいます（バグ）。

横マージンが2倍になるの気になってたのです。これがわかったことはすごいうれしいかも…。