人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSでリストタグを使ってメニューを作成してますが、Firefoxだとメニューの幅が広く表示され本文にかぶってしまいレイアウトが崩れてしまいます。ちなみにレイアウトは2段組です。

#menu{ text-align: left; width: 175px; float: left }
#menu #text ul{ list-style-type: none; margin: 0; padding: 0; border-top: 1px solid white }
#menu #text li{ background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center; margin: 0; padding: 0; border-bottom: 1px solid white }
#menu #text li a{ color: #fff; text-decoration: none; background-color: #1b328d; background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center; display: block; padding: 10px 0 10px 10px; width: 175px }
#menu #text li a:hover { color: #fff; background-color: #ff0; background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center }

どなたか詳しい方よろしくお願いいたします。

●質問者: yasudive
●カテゴリ:ウェブ制作
✍キーワード::hover background-color background-image background-position background-repeat
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● erf
●60ポイント ベストアンサー

#menu #text li a{ color: #fff; text-decoration: none; background-color: #1b328d; background-image: url("../navi_yajirusi.gif"); background-repeat: no-repeat; background-position: left center; display: block; padding: 10px 0 10px 10px; width: 175px }

このpaddingのleftにあたる分(10px)が大きくなってしまっているんだと思います。
これはIE(7は直っていた気がします)のバグでFirefoxの方が正く読み込んでいるのですが、widthの指定をIE6とその他のブラウザ用に2種類指定することで回避できます。

#menu #text li a{

width: 165px; // 本来この指定が正しい(paddingと、今回はないですがmarginも差し引いた数値)。(IE以外)

_width: 175px; // IE用のハックで対処。

}

上のコードを、既存コードのwidth指定と置き換えてみてください。

◎質問者からの返答

ありがとうございました。うまく解決することができました。感謝感激です。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ