IEの場合に、リストに余白ができてしまう

以下のようなコードを書いています。

HTMLのコード：：：：：：：：：：：：：：
<ul id="side_menu">
<li><a href="#">メニューA</a></li>
<li><a href="#">メニューB</a></li>
<li><a href="#">メニューC</a></li>
</ul>
：：：：：：：：：：：：：：：：：：：：

CSSのコード：：：：：：：：：：：：：：
#side_menu {
list-style:none;
padding:0;
margin:0;
}
#side_menu li {
padding:0 0 0 25px;
margin:0;
background: #F6F8E7 url(icon.gif) no-repeat 7px 5px;
border-left:1px solid #DDE6A5;
border-right:1px solid #DDE6A5;
border-bottom:1px solid #DDE6A5;
}
：：：：：：：：：：：：：：：：：：：：：

という感じで、サイドメニューにリスト要素を使い、リストの丸を消したあと、背景に矢印のようなアイコンを入れ、メニューAなどはpaddingでずらして表示しています。

FireFoxやOperaなどでは、paddingが意図したように表示されるのですが、どうやらIEはpaddingを一旦0pxで指定しても、余白ができてしまうみたいで、他のブラウザより右に寄ってしまいます。

IEでも、FireFoxなどと一緒の余白にしたいのですが、どうすればいいのでしょうか？アンダースコアハックみたいな形で、IEのみpaddingにマイナスの値を入れるしかないのでしょうか？

教えてください。

No.1 ベストアンサー 回答者： noname#19175 回答日時： 2006/06/21 22:55

未確認ですが、

list-style-position:inside;
を指定することで対応できないでしょうか？

http://www.mozilla.gr.jp/standards/webtips/webti …

この回答へのお礼

むしろ、逆のようでした。

他のCSSファイルで、ulに対して、
list-style-position:inside;
を指定しており、この指定を消すときれいに表示されました。

ありがとうございます、すいませんお騒がせしました。

お礼日時：2006/06/22 09:54