とりあえずこの BLOG が崩れていたのは、スタイルシートの言語定義で "Shift_JIS" の部分が "Shift_JISs" とタイプミスしていたのが原因でした。IE だとちゃんと Shift_JIS と認識されるようですが 、Firefox では融通が利かないみたいです。

　このBLOGの親ページのものづくり道の方の崩れ方はかなり厄介でした。全部の文字がセンタリング状態になっており、また画像と文字の位置バランスも崩れてました。

　まず、文字がセンタリングされていた問題は、スタイルシートで

text-align="left";

と記述していたのが原因でした。IE だとこれで認識してくれるのですが、Firefox だと無視されます。正しくは

text-align:left;

です。

　画像と文字の位置バランスですが、IE の場合、画像を表示させたあと、改行しなければ横に文字を書けるのですが、Firefox だと、スタイルシートを中途半端に定義してしまうと、必ずしもそうはならなくなるようです。IE では適当に誤魔化して配置していたのですが、Firefox だとうまく表示されませんでした。ちゃんと TABLE を使って定義することによって解決しました。

　IE で uｌ (マーク付きリスg) を使用する際、padding-left:0px を指定しても、左側の margin は確保されるのですが、Firefox の場合、margin も 0 になってしまうようです。IE と Firefox で margin と padding の定義が違うんでしょうか？以下その例です。両方のブラウザを持っている人は比べてみると、違いがでるはずです。Firefox は全体が左寄りになって崩れているはずです。

• （左マージンのサイズが Firefox と IE で違う例）

　また全体の枠の大きさを、heigth:95% としていたのですが、IE では、無視されていたようなのですが、Firefox だと適用され、レイアウトが崩れてしまいました。これはこの部分を削除することによって解決。

　解決策が分からなかったのが、Firefox だと 縦スクロールバーが表示されると時と、表示されない時で全体の横の配置がずれるという問題があるようです。普通のページならば問題にならないのかもしれませんが、ものづくり道のページのように、上部にタグを設置している場合、ページを切り替える際に、スクロールバーの有無で全体が左右にぶれてしまい、若干見づらいものになってしまいました。誰か解決策知りませんか？

　最後に、デフォルトのフォントが、IE と Firefox では違うようなので、明示的に指定するほうがいいかと思います。

たとえば

body{ font-family : MS UI Gothic; }

という風にします。ただ結局これでも、マイクロソフト以外のＯＳではちゃんと表示されないかもしれませんけどね。

そういや、世の中には Netscape というブラウザもありましたね。いろんなブラウザのことを考えてホームページを作るのは大変ですね。もうみんな IE でいいじゃん（笑）