ＦｉｒｅＦｏｘで見ると表示がおかしくなってしまいます

質問

困っています。質問させてください。
このカテゴリでいいのか分からないのですが・・・。

ＨＰを運用しているのですが、聞きかじりのcssを利用しています。
ＩＥだと場合によっては普通に表示されるのですが、FireFoxだと文字がどでかく表示されてしまって、レンタルスペースはＦＣ２を使っているのですがページの最後に表示されるはずの広告が文字列の中に割り込んでいたりして、表示がめちゃくちゃになってしまいます。

ちなみに使っているcssは

* {
margin:0;
padding:0;
}

html {
text-align:center;
height:100%;
}

body {
width:600px;
height:100%;
text-align:left;
}

#HEADER img {
display:block;
}

#NAV {
float:left;
width:200px;
height:100%;
margin-top:-100px;
padding-top:100px;
}

#CONTENT {
width:650px;
height:100%;
margin-top:-100px;
padding-top:100px;
margin-left:200px;
}

です。index.htmlのbody部分にはfontの大きさは全く指定していません。

よろしければFireFoxでご覧になってみてください。

http://clovermiwa.web.fc2.com/

私はＨＴＭＬをかじったくらいで、cssについては全く分かりません。
ＨＴＭＬが間違っているのかもしれません。

色々いじってみましたが、問題が解決されず、困っています。
よろしければご教授、お願い致します。

回答No.3

parumon · ベストアンサー

HTMLファイル中の<font color=blue size=6>が原因のようです。
閉じタグもないため、以降全てに影響しているみたいです。
No.1さんのいうとおり、まずはきっちりとソースをチェックしてから作業することをお勧めします。

お礼

コメントありがとうございます！！
ありました、サイズに触れている部分が！！
早速そこを削ったら、正常に表示されるようになりました。

自分で何度見直しても気づかなかったのに・・・。
本当にありがとうございます！

ソースもきちんとチェックして、直して行きたいと思います。
本当にありがとうございました！！

回答No.2

Pesi

記述で相違がある場合、優先順位がhtml>CSSなので、htmlにfont指定がされているか、もしくは記述ミスでなんらかの齟齬が起きていると思われます。
htmlを確認後、改めてfirefoxでの表示がおかしい場合は、以下をCSSに加えてください。

body {
width:600px;
height:100%;
text-align:left;
}

//このCSSの下に以下を加える

html>/**/body　{
width:600px;
height:100%;
text-align:left;
font-size: ??px;
}

こうすることで、IE以外のモダンブラウザ(上の記述ではbodyに対して）に適用されるCSSを作ることができます。

お礼

コメントありがとうございます！
さっそく書いて頂いたcssを加えてみました。size５とかにして。
・・・何も変わりませんでした・・・
なぜなんでしょう？HTMLを見直してみてもフォントサイズについては全く触れていないのに・・・。

頭のネジが飛びそうです。どこがいけないのでしょう・・・。

cssをわざわざ書いて下さったことには大感謝です。本当にありがとうございます！

回答No.1

noname#66720

このCSSではフォントサイズを変える要因がないのでHTMLに問題がありそうです。

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

ここでHTMLの修正をしてみてください。

お礼

コメントありがとうございます！
さっそくチェックしてみたところ、私のＨＴＭＬには直すところがいっぱいあることが判明しました。ちまちま言われたとおりに直してみたいと思います。
でもフォントサイズについては何も言われていないのですが・・・。
指示通りに直したらフォントサイズもまともになってくれるのでしょうか。
やってみたいと思います。本当にありがとうございます。