IEとfirefoxで表示のされ方が違う lu

メニューを作るときにCSSを使って作ったのですが、ファイヤーフォックスとインターネット・エクスプロらーでは表示のされ方が違い困りました。
メニューの表示に<ul>を使ってインライン要素で横並べにしました。しかし、IEではきちんと枠内におさまるのにファイヤーフォックスだと左側に余白が生じます。
問題のタグは下です。
<div id=”header-menu”>
<ul>
<li><a href=”#”>HOME</a></li>
<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>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
</div>
divの後にCSSのid=header-menuを記載してあるのです。
解決した方法は、DIVを使わずに以下のようにしました。
<ul id=”header-menu”>
<li><a href=”#”>HOME</a></li>
<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>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
<ul>の後にCSSのid=~をつなぐことでIEとファイヤーフォックスの表示を同じにすることができました。

コメント