• 締切済み

CSSのリストタグでメニューを作ってますがレイアウトが崩れます

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 } どなたか詳しい方よろしくお願いいたします。

みんなの回答

  • kuzumiHK
  • ベストアンサー率72% (132/183)
回答No.1

原因は、DOCTYPE宣言が入っていないため、 IEでスタイルがうまく効いていないことと、 「#menu #text li a」の値の 「padding: 10px 0 10px 10px; width: 175px」部分の計算が、 あっていないことが考えられます。 (padding:10px;width155px)でulの175pxとぴったりになります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

すると、全ての回答が全文表示されます。

専門家に質問してみよう