Firefoxだとメニューバーが崩れてしまいます。

質問

movable typeでなんとかここまできました。
http://www.mamyu.jp

これをFirefoxでみますと、メニューの部分だけ大幅に崩れてしまいます。

スタイルシートの問題だと思うのですが、
その部分は、
#nav {
margin-left: 0;
padding-left: 0;
list-style-type: none;
border-top: 0px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1pxsolid #999999;
background-image: url(images/beansmenu01.gif);
background-repeat: repeat-x;
background-position: bottom;
height:25px;
width: 849px;
float: left;
}

#nav a {
font-size: 12px;
font-weight: bold;
color: #0000CC;
text-decoration: none;
background-repeat: no-repeat;
background-position: left top;
display: block;
height: 25px;
width: 121px;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
}

#nav a:hover {
color:#cc3300;
background-repeat: no-repeat;
}

#nav li {
float: left;
width: 121;
}

としており、
テンプレート部分は、
<ul id="nav">
<li><a href="http://www.mamyu.jp/">ＴＯＰ</a></li>
<li><a href="http://www.mamyu.jp/000">ブログ</a></li>
<li><a href="http://www.mamyu.jp/001">政治信条</a></li>
<li><a href="http://www.mamyu.jp/002">プロフィール</a></li>
<li><a href="http://www.mamyu.jp/003">政治家養成塾</a></li>
<li><a href="http://www.mamyu.jp/007">競馬場問題</a></li>
<li><a href="http://www.j-beans.jp">ホームページ</a></li>
</ul>
としております。

これでどうしてFirefoxだと大きく崩れてしまうのか。崩れない方法はないものかわからないままです。それぞれのメニューバーの左側にでる○印がなんとも邪魔なのです。。。。

回答No.2

sun-ward · ベストアンサー

先ほどの続きになります。
padding-left: 20px; は、確かに余白のとり方に差がでますね。

同じ部分に、width:121px; という記述がありますが、
FireFoxでは余白になるはずの20pxを、
何故か121pxに足して、141pxの箱（両端borderも入れて143px）を作っていますね…。

対策としては、padding-left: 20px;を削除しましょう。
すると、IEでもFireFoxでも、■印に文字がかぶりますから、
今度はHTML側で「ＴＯＰ」「ブログ」などの文字の前に
全角スペースを２つ入れてあげます。

CSSのスマートな解決ではないのですが、
ローカルに保存させていただいたコピーでは、
上記の方法でIE・FireFoxともに程よく表示されています。

治るか分かりませんが、まずはお試しください。

----------
リストタグの使い方ですが、
リストタグはデフォルトで様々な余白のとり方をするHTMLタグでしたので、
余白を調整するpaddingやmarginが煩雑になるかと思い
先ほどは書きました。

が、代わりに薦めようと思っていたTABLEタグも多用は嫌がられますし、
そもそもCSSには極力使わない方が良いでしょうから、
問題ないように思い直しました＾＾；

回答No.1

sun-ward

ソースを拝見しました。
デザインが崩れるというより、○印が出現しているために
メニュー部分が改行しているのでしょう。

スタイルシート内に、以下の記述がありますので
これを取り除けば○印はなくなるでしょう。

UL LI {
LIST-STYLE-TYPE: circle
}

ただ、こういったメニューにリストタグを使うのは、
ソースも肥大しますし、デザイン的にもリスクがあるのではないでしょうか。。。

お礼

sun-wardさま

さっそくありがとうございます。
おかげさまで○印は消えました！
心から御礼申し上げます。

それでもまだFirefoxでは若干ずれてしまいます。
おそらく
#nav a {
のところの
padding-left: 20px;
の解釈がブラウザで違うためだと思われます。
これは私のレベルでは太刀打ちできません。。。。
何かお知恵があればお貸しください(--)。

また
＞　ただ、こういったメニューにリストタグを使うのは、
＞　ソースも肥大しますし、デザイン的にもリスクがあるのではない
＞　でしょうか。。。
という点につきまして、もう少しご教授いただければありがたく存じます。