こんにちは。
日曜日はせっかくの休みだというのに、「サイドバーがなぜか18px下がる」というなぞの現象に苦しめられました。
この現象が再現するブラウザはIE6、IE7、Chromeでした。(Windowd vista)
結論から言うと現象は以下のものらしい。
Wordpress (Internet Explorer) での UTF-8 の取り扱い
SSIでincludeするときにIEで謎のスペースが！
なぜかsidebar.phpのみBOMつきになていたためこのような事態になった模様。
そもそもBOM(Byte Order Mark)とはUTF-8ファイルのエンディアンを判定するために、先頭に”EF BB BF”を書きこむのだそうだ。
結果この3バイトをデータとして扱うブラウザは改行などの形として現れるということでしょうか。
以前、ヘッダーが一文字分隙間があったのもこれが原因ぽいな。
そういや、XHTMLチェッカでもUTF8(BOM付き)ファイルがあると警告を出力していたな～。「UTF-8はBOMなしで！！」ってことですね。
How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds
パターンや大きい背景画像に対応シンプルなウェブレイアウトの作り方が丁寧に説明されています。一読しておくべきですね。
知らなかったのでメモ。
firefoxとIEにおけるz-indexの解釈の違いについて。
* firefoxの場合
o z-index指定が何より優先
o z-indexの数値の大きいものが必ず前面に表示され、指定のないものは後ろ面に表示される
o z-indexの数値が同じものや、z-index指定がないものは、HTMLで後に書かれているブロックが前面に表示される
* IEの場合
o HTMLに書かれている順番が優先される。
o HTMLで、後に書かれているブロックが前面に表示される。
o z-indexの数値は、ブロック内の順番の指定になるが、ブロックをまたいで解釈されることはない。
ということらしいです。今日ちょいはまりました。
CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』min-heightやmin-widthはIE6等ではサポートされていません。IE6でもmin-heightが使えたら便利だなあと考えていたとこえろ、上記の記事を発見。こんなに簡単に実現できるんですな。
・min-heightの場合
スライドバーを操作することで、直感的に枠組みレイアウトCSSを生成してくれるColumn Layout Generatorです。
Column Layout Generator
スライドバーにてwidthパーセンテージを変更させることによって、サンプルレイアウトとCSSが随時更新表示されます。
・3 Column Layout Generator
・2 Column Layout Generator
・1 Column Layout Generator
が用意されており、ブラウザはIE 8.0 beta, 7.0, 6.0、Firefox 1.5, 3.0が確認済み。
floatボックスが親ボックスを突き破る問題についてのメモ。結構ハマリやすいので要注意です。この現象において何が一番の問題になるかというと、親ボックスの背景が伸びないのが問題となります。逆に親ボックスに背景を指定していない場合この現象には気づきにくいのではないでしょうか。以下がこの現象のスクリーンショット
float_sample1.htmlコードは以下
<style>
.parent{
border:1px solid #666;
color: #333;
}
.child1{
float:left;
width:100px;
height:100px;
border:1px solid #999;
background: #f0f0f0;
}
.child2{
float:right;
width:100px;
height:100px;
border:1px solid #999;
background: #CC0099;
}
</style>
<div class="parent">
Parent
<div class="child1">
child1
</div>
<div class="child2">
child2
</div>
</div>