解決済

clip!clip!
Ads By Google

FIREFOXで見ると大幅に崩れます。

Windows XP IE6です。
IEで見ると指定した通りの文字と色が表示されますが、
Firefox3.0で見ると本文とプラグインが背景画像より左に寄り
カレンダーの文字が大きくなり、
ブログタイトルとdescription、投稿の日付、
下段の「タグ、Permalink、 Comments」などの色表示が
IEの指定どおりに表示されません。→何処を直せば
IEと同じ色になるのか全く分かりません。

過去の質問も探してみましたが修正方法が分かりません。
お手数をおかけしますがお教えください。
もしくは同じテンプレートでもう一度作りなおしたほうが良いでしょうか。

以下のブログです。



初心者が面白がって進めてきたので見当違い(不正な)な
カスタマイズをしてきたかもしれません(反省)。

どうぞよろしくお願いします。asease

2008-09-27 18:36の質問
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。

回答(1)

1.

2008-09-27 19:48:50ベスト
何から手を付けたらいいかよくわからんので、
気の付いたところだけ

>左に寄り
#container{
  width:753px;
  margin:0;auto 0 auto;
のところ
margin:0;
の意味になっています。
margin:0 auto;
に変更

>色表示が指定どおりに
.description{
 color:#FDF5E6;
の所
color の前の空白が全角の空白が使われています。
そのためにcolor の指定と見なされていません。

他にも全角空白文字を使っているところが多々あります。
半角空白を使って下さい。
回答レベル : アドバイス

>>BLUEPIXY様
有難うございました。

半角の空白=の意味が分からなかったので
ソースを開いたらおっしゃる通りでした。

>何から手を付けたらいいか

「。ム」が日の丸みたいな画像として反映されていたり、
「。。。。。。」の羅列が沢山ありました。

ソースを見ながらそれらを消して、すべて半角になるよう
CSSを修正したら文字色、背景のずれなどは直りました。

現在Firefoxではタイトル部分の画像とdescriptionがかぶっていますが、
右サイドプラグインが落ちているので
本文内のテーブルサイズをページ毎に直してから、
文字の大きさなども含めて再度、ご質問させてくださいませ。

本当に有難うございました。
感謝、感動です。
また勉強させていただきました。



Ads By Google

コメント(4)

2008-09-27 19:23:55

Firefoxはスタイルシートが崩れることが有名なのでOperaにしましょう。

2008-09-27 21:36:33

他に記述タグの整合性の問題もあると思う。
例えば、

<div> ‥‥ </div>
と記述すべきなのに末尾の</div>記述をしなかった、とかね。

FirefoxはW3C規格を遵守して作られているので、文法にはとても厳しく、文法違反をするとその部分を無視するので、どのような表示になるか予想もつきません。
だからといってFirefoxを悪く言っているわけではありません。Firefoxの処理で正しいのです。
IEはW3C規格を無視しているところがあるため、規格に合わない記述をしてもなんとなく正しく表示する場合があります。

#3.  魔女
2008-09-28 16:32:39

>NIPO Ultimate様
有難うございます。
Firefoxで見ると崩れているとご指摘いただいて
画像以外は何とか「見られる程度」に修正できました。

初心者なので他のブラウザでどのように見えるかなど気にもせず…。

今回も大変勉強になりました。

時間がかかると思いますが画像が上手く
納まったらOperaでも見たいと思います。

アドバイスありがとうございます。
これからもどうぞよろしくお願いします。

#4.  魔女
2008-09-28 16:40:02

>>テンゾー&テンロク様
有難うございました。
確かに</div>で閉じていないところがありました。

IEは素人でも「やってみたら何となく出来ちゃった」という
気分にさせてくれるので優しいのですね。
W3C…また難しい言葉に出会いました、勉強します。

IEとFirefoxで同じ指定をしても
表示の違いがある事が良く分かりました。

これからも勉強していきますので
どうぞよろしくお願いします。

トラックバック(2)

トラックバックURL: