本気でＣＳＳを見直さないとヤバい

Internet Explorer 以外のブラウザを使用すると、レイアウトにズレが生じるのです。

Sleipnir なら問題無さげですが、HTMLレンダリングエンジンを Gecko に切り替えれば同じことです（今回のようなレイアウトの確認に便利かなぁ　と思ったりします＞ Sleipnir のエンジン切り替え）。

これまでは「ワールドフィッシングの動作環境が Internet Explorer だから」ということで、逃げというか 見てみぬフリ をしていましたが、アクセス解析の結果、意外にも Internet Explorer 以外のブラウザで見ている人が居る　と認識したら、流石にねぇ．．．

書籍や関連サイトを読み漁ると、少なくとも　余白の考え方，ブロックレベル要素の中央揃え．．．などに違いが出てくるようです。

そして FireFox や Opera などで見てみると、実際にズレが生じています。

また JavaScript にも、一部動かないものがあったりします。が、これはとりあえず後回しにして、まずはＣＳＳの見直しでもって、レイアウトがより意図したものになるよう解決しましょう。

目標は、こんな感じかな？

文書型宣言自体は Transitional のままで、URL 表記を追加する（後方互換モードから、標準モードへ移行）
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  - ＃いきなり iframe が表示されなくなって、ビックリですよー（正解かどうかは別にして、なんとか表示するようになりました＾＾）
  - ＃画像にａｌｔ属性（代替テキスト）は付けているのですが、ｔｉｔｌｅ属性を付けないと、Internet Explorer 以外のブラウザではチップヘルプ表示されないんですね．．．
HTML 中に埋め込んだスタイル記述も、できるだけ外部スタイルシートに移動する
- キチンとした論理的思考のもとにＣＳＳが構築できていれば、こんなことにはならなかったのですが．．．その場しのぎも限界 ってことです

検証対象： http://hp.vector.co.jp/authors/VA045050/memo/style_emubtn.css

検証対象： http://hp.vector.co.jp/authors/VA045050/memo/style_base.css

検証対象： http://hp.vector.co.jp/authors/VA045050/memo/style_top.css

検証対象： http://hp.vector.co.jp/authors/VA045050/memo/style_bg.css

すべて CSS2 として検証しています。

「おめでとうございます！この文書は正当なCSSとして検証できました！」と表示されれば、”｛～｝” の閉じ忘れや有り得ない記述など、重大なミスはしていない模様（意図したレイアウトの表現とは、また、別の問題ではあるけれど．．．最低限の条件ですよね）。

説明