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

メニューを作るときにCSSを使って作ったのですが、ファイヤーフォックスとインターネット・エクスプロらーでは表示のされ方が違い困りました。
メニューの表示に＜ｕｌ＞を使ってインライン要素で横並べにしました。しかし、ＩＥではきちんと枠内におさまるのにファイヤーフォックスだと左側に余白が生じます。
問題のタグは下です。
<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のｉｄ＝ｈｅａｄｅｒ-ｍｅｎｕを記載してあるのです。
解決した方法は、ＤＩＶを使わずに以下のようにしました。
   <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>
＜ｕｌ＞の後にＣＳＳのｉｄ＝～をつなぐことでＩＥとファイヤーフォックスの表示を同じにすることができました。