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ベストアンサー
- 回答日時:
クリアーや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
- 回答日時:
こんばんは
liタグを使ってときの表意は、Internet ExplorerとFire foxでデフォルト(特に指定しないときの設定値)が異なります。
そのため、marginやpaddingを指定しない場合には表示が異なります。
cssの
.topnavi li
で
margin-left
と
padding-left
の両方を設定してみてください。
お礼が遅くなってすいません。
ブラウザの差をなくす為に
必要なさそうでもmarginとpaddingは指定しておいたほうがいいんですね。
回答ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
なぜ?マウスオーバーで1pt位置...
-
<ul>~</ul>が二つ続くと間に改...
-
ページを開いているときのリン...
-
リストの数字のフォントサイズ...
-
リストのナンバータグがFirefox...
-
header と nav の隙間を埋めたい。
-
<ul><li></li></ul>にするメリ...
-
list-style-type部分だけ大きく...
-
更新履歴の作り方
-
アコーディオンメニューがかく...
-
秀丸の正規表現(HTMLの修正)に...
-
CSSでメニューボタンを横一列に...
-
<table>の高さ固定。情報増加時...
-
番号付きリスト(<Ol><Li>・・...
-
HTML5のfooterに見出しを付けて...
-
画像添付のようにチェックボッ...
-
初心者です。エラー表示をなく...
-
円形の配置にするコーディング...
-
IE6でナビ下に隙間ができてしま...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
html <ul></ul>の並びで一行空...
-
ページを開いているときのリン...
-
HTML5のfooterに見出しを付けて...
-
html/cssの、navを2段にする...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報