Diary--/*isaji*/MIDI Lab.

<< 2024/10 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>

テンプレートを大幅に修正 2006-01-16 [permalink] [?B] はてなブックマーク

見た目は全く変わっていないと思うけど、html内の記述順とCSSの配置に関わる部分を大幅に書き換えました。今までは日記本文を記述してある部分(content)の前にsidebarを記述して、左にフロートする事で左メニューの2カラムレイアウトにしていたのですが、contentに内在するブロック要素の横幅がcontentの横幅を越える、または文章が正常に折り返しを行わない状況になると、IEではcontentがsidebarの下に配置される事がありました。CSSの解釈が比較的正しいとされるKHTMLやOperaではこういった事は起こらないのですが、現状最もユーザが多いとされるInternetExplorerでもある程度は表示出来ないと困るので暫定的な処置、みたいな感じ。

フロートで配置している以上、フロートされたブロック要素が直前のフロートした要素の下に配置される事は避けられないので、どうせ下に落ちるならばcontentよりもsidebarの方が良いだろう、ということで。html文書内での記述順をcontent→sidebarの順に変更し、右にフロートさせることにしました。

IEと他の先進的ブラウザではwidthプロパティの解釈が異なるようで、width:80%;のcontentの横にwidth:20%;のsidebarを配置しようとしても、IEでは20%中の20%の横幅で表示されてしまうので、IEがまともに解釈しない隣接セレクタ(もしくは隣接セレクタによる同一プロパティの値を上書きしない?)を用いてIEではsidebarの横幅を100%になるようにしているのですが、IE5ではこの隣接セレクタを解釈してしまい尚かつwidth値の解釈がおかしい為、sidebarがもの凄く細く表示されます。IE5は切り捨てる方向で。

表示の確認はKonqueror 3.5,Opera 9.0/8.51,Firefox1.5及びIE6/5で行いました。InternetExplorer 6では以前よりも崩れにくくなった、という程度。IE5は前述のとおり意図した表示にはなりませんが本文の閲覧に支障は無いはずです。

sidebarよりも先にcontentが表示されるので、w3m等のテキストブラウザでも読みやすくなったと思います。

css html | comments (0) | trackbacks (0)