コマネタ帳(旧) by iyoupapa

PCや土いじりやゲームやオモチャ、思いつくまま細切れネタを書き散らかす日記

Creative Commons Licenseiyoupapaが書いたコマネタ帳の文章は「Creative Commons 表示-継承 2.1 日本」ライセンスです。写真については私のFlickrで配布しています。新しい「コマネタ帳」に移転しました。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ようやくリキッドレイアウト化しました

固定幅のレイアウトはブラウザを最大化しても情報量がそれほど増えないという困った性質があるので、何とかリキッドレイアウト(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を利用させていただきました。

コメント

コメントの投稿















管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://iyouneta.blog49.fc2.com/tb.php/200-1dc07b5c

skin presented by myhurt : BLOG | SKIN

FC2Ad

  
copyright © 2005 コマネタ帳(旧) some rights reserved. Powered by FC2ブログ