コマネタ帳

固定幅のレイアウトはブラウザを最大化しても情報量がそれほど増えないという困った性質があるので、何とかリキッドレイアウト(liquid layout、Fluid Layoutと呼ぶこともあるようです)に変更してみました。HTMLもCSSも元のテンプレートからいじるだけなんですけどね、IEが鬼門なんですよ、やっぱり

元ネタは「The only CSS layout you need(?) | Strictly CSS」です。注釈も多く、分かりやすいソースなので現在のテンプレートにサックと組み込めます。

しかし、お約束というか、FirefoxではOKなのにIE6では<h>要素や<li>要素のborder、background-imageが表示されないことが頻出してくれました。「floatした部分のborderが消えるIEのバグ」のように「floatした要素の親要素のborderが表示されない」のではなく、「floatした要素の子孫要素のborderが表示されない」という謎現象です。取りあえずborderが表示されていない要素の親<div>でwidthを指定すると表示されましたが、いまいち納得できていません。おいらの腐ったCSS知識では追求しきれないです。

本来なら印刷用のCSSも必要ですけど、このブログを印刷する人はほぼいない筈(ぉ)なので省略...。

備忘録として、今回お世話になったサイトを挙げておきます。

CSSバグリスト＠CSSバグ辞典スレッド

壮絶なまとめサイトです。これからもお世話になることでしょう。

『CSSバグ辞典スレッド』の要約の要約 (Nega Diary)

定石がきっちり纏められています。しかし、ほとんど自分のCSSには反映できていません。猫に小判ですね、本当に。

IE Developer Toolbar

今回はIEでの不具合でしたので、調査用に使いました。この記事の問題には役に立たなかったのですが、別の問題を見つけることができました。<div>構造の解析にはかなり便利そうです。

擬似min-width::blogmake - ブログのカスタマイズを試すブログ

疑似min-widthを利用させていただきました。