CSSでリスト[li]の表示がズレる

質問

HTMLの無料テンプレートを使おうとこちら
http://simple.sub.jp/temp.htm
からEタイプ（サイズ固定）をダウンロードしたのですが
ローカルで見てみるとfirefoxでヘッダー下のリンク（liで記述）がずれます。
添付画像：firefoxでのスクリーンショット

修正しようと見てみましたがどこが悪いのか分かりません。
「.topnavi li」だと思うのですが、どこが悪いのでしょうか？
ご指摘お願いいたします。

HTMLの該当部分
<div id="banner">
<h1><a name="TopofPage">ここにサイトのタイトル</a></h1>
</div>
<div class="topnavi">
<ul>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
</ul>
</div>

cssの該当部分
.topnavi{
float:left;
width:100%;
background:#99ccff;
border-width:1px 0 1px 0;
border-style:solid #999;
height:20px;
}
.topnavi li{
display:block;
float:left;
width:125px;
text-align:center;
font-size:1.2em%;
list-style-type:none;
}

回答No.1

naokita · ベストアンサー

クリアーやheight:20px;の関係など、ここだけ見る限りは問題あるかな。

ULのCSSは無いのかな？
ul に対して、margin や padding を設定しているのかな？

とりあえずの対処法は、
.topnavi ul{ margin-top:0; padding-top:0;}
で、どうなりますか？
本来は、.topnavi ul{ margin:0; padding:0;}　でリセットした方が良いんだけど。

font-size:1.2em%;　って何？・・・

お礼

回答ありがとうございます。
すごい。
.topnavi ul{ margin-top:0; padding-top:0;}で
[　　　　リンク　　リンク　　リンク　　リンク　　リンク　　　　]
となっているリストの上のスキマが消えました。
これはuiの外側のulで勝手にスペースを取っていたのでしょうか？
うーん何故なんだろう。

.topnavi ul{ margin:0; padding:0;}ですと
[　　リンク　　リンク　　リンク　　リンク　　リンク　　　　　　]
となって125pxのブロックが左寄せになりました。
でもfloat:left;だったのに、何で元は中央だったんでしょう？
うーん、謎が謎を呼んでます・・・

あとすいません
font-size:1.2em%;　ってのは
cssをいろいろイジって1.2emを120%などとしてたのを
元cssを質問文にコピペするためemに戻した時の%の消し忘れでした。。。

回答No.2

rukuku

こんばんは

liタグを使ってときの表意は、Internet ExplorerとFire foxでデフォルト（特に指定しないときの設定値）が異なります。
そのため、marginやpaddingを指定しない場合には表示が異なります。

cssの
.topnavi li
で
margin-left
と
padding-left
の両方を設定してみてください。

お礼

お礼が遅くなってすいません。
ブラウザの差をなくす為に
必要なさそうでもmarginとpaddingは指定しておいたほうがいいんですね。

回答ありがとうございました。