ご訪問ありがとうございます。パソコンを使っていて試行錯誤したことを記載した備忘録です。

このブログは移転いたしました。3秒後に新しい移転先へジャンプします。

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

メニューを作るときに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とファイヤーフォックスの表示を同じにすることができました。

【2009/03/24 16:36】 | ホームページ作成
トラックバック(0) |
コメント
この記事へのコメント
コメントを投稿
URL:

Pass:
秘密: 管理者にだけ表示を許可
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック