センタリングした背景が1pxずれる

　こちらも先週の日曜日にはまったものなんですが。

body {
  background: url(bg.gif) top center repeat-y
}

CSSで上記のような記述した場合、各ブラウザで挙動が違うようです。

参考サイトは以下
・IEで背景画像とコンテンツが1pxずれるのを回避する方法
・Opera、Safariで中寄せした背景が1ピクセル右にずれる問題

これもまた注意が必要ですね～。

サイドバーのなぞの18pxの隙間

　こんにちは。
日曜日はせっかくの休みだというのに、「サイドバーがなぜか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なしで！！」ってことですね。

おっしゃれーなメニューの配布サイト

phpspotさんにて紹介されていた、Styled Css Menus – High Quality Web Based Professional Css Menus: allmenus。おしゃれなメニューが配布されておりかなり使えそうな感じ。

パターンや大きい背景画像に対応シンプルなウェブレイアウトの作り方

How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds

パターンや大きい背景画像に対応シンプルなウェブレイアウトの作り方が丁寧に説明されています。一読しておくべきですね。

firefoxとIEにおけるz-indexの解釈の違い

知らなかったのでメモ。
firefoxとIEにおけるz-indexの解釈の違いについて。

IEとFirefoxでz-indexの扱いが異なる

* firefoxの場合
o z-index指定が何より優先
o z-indexの数値の大きいものが必ず前面に表示され、指定のないものは後ろ面に表示される
o z-indexの数値が同じものや、z-index指定がないものは、HTMLで後に書かれているブロックが前面に表示される
* IEの場合
o HTMLに書かれている順番が優先される。
o HTMLで、後に書かれているブロックが前面に表示される。
o z-indexの数値は、ブロック内の順番の指定になるが、ブロックをまたいで解釈されることはない。

ということらしいです。今日ちょいはまりました。

min-heightをクロスブラウザにする最も簡単な方法

CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』min-heightやmin-widthはIE6等ではサポートされていません。IE6でもmin-heightが使えたら便利だなあと考えていたとこえろ、上記の記事を発見。こんなに簡単に実現できるんですな。
・min-heightの場合