娘娘飯店（にゃんにゃんはんてん）に再度救われる

5月9日に作業した某DBのCSS調整だが、WinIE-OK、Safari-OKで作業を終えていた。
その時はFirefoxで確認していなかった。

社長が先生に今度からFirefoxで見てもらうために事前に確認していたところ、なぜかまたwidthとmarginの解釈が Quirks mode（過去慣習的な解釈を再現するモード) になってしまっていたことが判明。

DOCTYPEで CSS 仕様に従った正しい解釈をするモード (Standards mode) にしていたはずなのに・・・

自分で考えてもわからなかったので、前回のように知らないことがあると思いネットで調査。

前回参照させてもらったときは気がつかなかったが、かなりヲタちっくなこのサイトに、またまた助けられた。

http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_example.html#box-sizing-behavior

ココを見て、box-sizing: border-boxに目が留まった。調整しているCSSファイルのトップに-moz-box-sizingと書いてあったのだ。

DOCTYPEではwidthにborderを含めない解釈をするように書き、それに従ってCSSのWidth指定幅からborder幅を引いた数値に調整していたのに、-moz-box-sizingが効いてfirefoxだけ、widthの指定にborderを含めてしまってズレていた。

-moz-box-sizingをコメントアウトしてみたら、なおった。

解決できると、うれしいね。

解決ですよ

#container{
width:758px;
margin:0 auto;
background:#FFFFFF;
border-right: 1px #CCCCCC solid;
border-left: 1px #CCCCCC solid;

}

これはこのままで。これが正しいはずなので。

まず最初に思ったのは、IEでDOCTYPE 宣言が変化してような現象であるということ。少し前までは、ちゃんとした解釈でIEも表示できていたのに。

http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/Doctype-Switch_situation.html#test-browserより。

Internet Explorer 6.0 (Win) について
DOCTYPE 宣言の出現以前に半角空白または改行以外の文字が存在する場合、有無を言わさず Quirks モードとなってしまうようです。という事は XML 宣言のある XHTML の場合は、上記理由で Quirks モードとなってしまうという～。なんじゃそりゃ。

そうなんだー。javascriptの調整の時に
<?xml version="1.0" encoding="Shift_Jis"?>
DOCTYPE 宣言の前にいれることによって、解釈が変化してしまっていたのだ。

それで、社長がブログに書いていたようにもう一つの方法であるpopupimage.jsのなかのプロパティを変えて、

if (document.all) {
//y = document.body.scrollTop + 32;←消すのが怖かったのでコメントアウト
  y = document.documentElement.scrollTop  + 32;

かつすべてのhtmlファイルの一行目に書いていた
<?xml version="1.0" encoding="Shift_Jis"?>を全部消した。

すると解決。キット解決。たぶん解決。

ボーダー分ずれたりずれなかったり

divでくくっている各パーツをコメントアウトしてブラウザでプレビューしてどこに原因があるか探った。

どうも大枠がずれているようだ。

変更点

#container{
width:758px;
margin:0 auto;
background:#FFFFFF;
border-right: 1px #CCCCCC solid;
border-left: 1px #CCCCCC solid;

}

これを下記のように修正。

#container{
width:760px;
margin:0 auto;
background:#FFFFFF;
border-right: 1px #CCCCCC solid;
border-left: 1px #CCCCCC solid;

}

これで一応全部のページのズレが直った。直ったけどなんでかがわからない。

んで、こんどはトップページだけまた2ピクセルずれる。自分でやっておいて忘れていたけれど、トップだけテンプレと切り離されていた。

他のページと違うといえば・・・
<?xml version="1.0" encoding="Shift_Jis"?>
これがはいっていなかった。

付け加えると、WinIEでは解決。

これだとsafariやfirefoxではズレるよねー、と思いマックでは事務所にいかないと確認できないけど、とりあえずWin firefoxをﾀﾞｳｿして確認。

щ(ﾟﾛﾟщ) ｵｰﾏｲｶﾞｰｯ!!
やっぱズレているよ。

あともう一点気になったのが、テーブルをセンタリングするためにmargin:0 auto;としていたのがWinIEで効かなくなっているみたい。Win firefoxではOKなのに。

CSS、やっかいでんなぁ。つか、WinIE Ver.6しっかりして欲しい。あ、私がいちばんしっかりしてないのか。

一晩寝て、明日またフレッシュな頭で調べてみよう。

#ironHearts CSSルール

• IDはどのタグにつけたかCSSだけをみてわかるようにdiv#topicsのように記述すること。
• 各ページ固有のCSSはページのheadに埋め込む。
• IDの名前などの単語は省略しない。
• 名前の単語が続くときは2語目の頭を大文字にする。topNaviとか。

いろいろ収穫CSS

• <ul><li>タグを利用してリスト表示させるとき、あたまに画像を作ってアイコンに使うことがよくある。その画像がテキストより大きいとテキストとの並びがずれたりする。アイコンに使う画像の幅はテキストより小さくする。

• firefoxよりサファリのほうが多少文字が大きく表示される。relをはずしてサファリにしか読めないCSSを記述し、文字の大きさを別指定。

  <link media="all" href="main.css" type="text/css" rel="stylesheet" />
  <link media="all" href="main-safari.css" type="text/css" />

• フォントのサイズ指定はなるべく上の階層に指定されるIDの中で一括する。でないと、８０％のさらに８０％のサイズみたいな予想外の大きさになっていく場合がある。

• 全体をくくったDIVの設定が反映されないトラブルに遭遇。以下を最後のDIVを閉じるタグの直前につけると解消。段組を使わないサイトは少ないし、これはどうもCSSの定石かも。

  <br style="clear:both">

• idの名前のあたまに数字をもってくるのはNG。safariではまちがって反映されていたが、firefoxでは表示されない。

• marginの設定の時はpxなど単位をかならずつける。