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 }

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

回答の条件
  • 1人2回まで
  • 登録:2008/05/05 10:36:35
  • 終了:2008/05/06 04:18:02

ベストアンサー

id:erf No.1

erf回答回数1ベストアンサー獲得回数12008/05/05 23:12:19

ポイント60pt

#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指定と置き換えてみてください。

id:yasudive

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

2008/05/06 04:17:43

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません