- 締切済み
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 } どなたか詳しい方よろしくお願いいたします。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- kuzumiHK
- ベストアンサー率72% (132/183)
原因は、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">
