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

Question

yasudive

6

6もっと見る

60pt

ウェブ制作

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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

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

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

erf · Accepted Answer · 2008-05-05T23:12:19+09:00

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

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

ベストアンサー

erf112008/05/05 23:12:19

コメント（0件)

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