2006/12/10(日)[CSS] W3C規定とIE6の内容部分の計算の違い

adiary::テーマ

W3Cで規定されている内容部分の計算

下記の色つき部分がwidthで計算されます。

margin

border

padding

contents

contents部分の幅はwidthで指定した値となります。

contents部分の幅 = widthの値

heightも同様です。

IE6の内容部分の計算

下記の色つき部分がwidthで計算されます。

margin

border

padding

contents

よって、IE6の場合はcontents部分の幅は

contents部分の幅 = widthの値 - paddingの値 - borderの値

となります。heightも同様です。

paddingがwidthに含まれることは知っていましたがborderまで含まれるとは思いませんでした。

コメント（0件）

2006/12/06(水)テーマを変更しました

adiary::テーマ

作成中のテーマがとりあえず閲覧には困らない程度には出来上がったので変更しました。
Firefox/Operaでの閲覧を激しく推奨、IEでの閲覧を激しく非推奨((いや、もちろんIEでもそれなりに表示できるようには作りましたが、かなりの部分で処理が簡略化されています。
何よりもお姉さまになれません（爆）))。

システムモードとかカレンダーの部分はやっつけで調整に時間がかかりそう。このあたりがちゃんとできれば公開するつもりです。

コメント（7件）

2006/12/06(水)テーマ開発の進捗

adiary::テーマ

今はこんな感じ。
[album:adiary/theme:mizuho090.jpg]
だいたいできたのだけど、タイトル部がちょっと寂しい気がするので考え中。

あと、サイドバー項目タイトルの置き換え案募集中。
淑女テーマをベースに現在以下のように置き換えています。

  • Information → お知らせ
  • 最近の記事 → 日記
  • 最近のコメント → ご連絡
  • 最近のトラックバック → お手紙
  • ジャンル別、記事 → 趣味
  • System Info → システムの状態
コメント（0件）

2006/12/05(火)IEの謎な継承とblock要素の謎な計算

adiary::テーマ

adiary記事タイトル部の構造は下記のようになっています。

  • h2
    • a.switch
    • a
      • span.date
    • a
      • span.title

作成中のCSS

[album:adiary/theme:mizuho_h2.jpg]
h2の内側にあるspan.date, span.titleをblock要素に変更し、上記の画像のように配置するためのCSSのソースは以下のようになります。

div.day h2 {
background-image:	url("article-top.png");
background-position:	top left;
background-repeat:	no-repeat;
margin:			0;
padding:		24px 32px 0 32px;
min-height:		38px;
_height:		62px;
}

div.day h2 a.switch { display: none; }

div.day h2 span.date {
display:		block;
background-color:	transparent;
width:			476px;
text-align:		center;
line-height:		20px;
margin:			0;
margin-top:		-20px;
padding:		0;
}

div.day h2 span.title {
display:		block;
width:			436px;
background-color:	#5eb4bb;
text-align:		center;
margin:			0;
padding:		0.3em 20px;
_width:			476px;
}

このソースをIE6に適用する

[album:adiary/theme:mizuho_h2_ie.jpg]
上記の画像のようにレンダリングされます。

  1. h2で指定した背景画像がspan.title部で呼ばれている
  2. h2で指定したブロックの内側のサイズ(height)が無視され後続のブロック(div.body)と隣り合ってしまっている

解決策

1つめの問題は
span.date{ _padding-bottom: 1px; }
とすることでh2で指定した背景画像が呼ばれなくなります。

2つめの問題は解決策を見つけることができませんでした。
仕方がないのでspan.title部のpaddingを大きく取りh2部のサイズを62px以上になるようにしましたが、根本的な解決にはなっていません。

愚痴

テーマ作成の度に上記のようなIEのバグに対する解決策を手探りで探すことになり非常に辛い。CSSで利用できるプロパティも制限されるし。何故みんなそんなにも時代遅れでバグだらけなブラウザが好きなんだ？

コメント（0件）

2006/12/04(月)[CSS] Operaで:before/:after疑似セレクタで背景画像が使えないバグ

adiary::テーマ

Opera9.02で

body {
background-image:	url("body-middle.png");
background-repeat:	repeat-y;
}

body:after {
display:		block;
background-image: 	url("body-bottom.png");
}

としても、body:after部分でbody-bottom.pngの背景画像が読み込まれずbody:after部分のブロックの背景画像は親要素であるbody-middle.pngが使われてしまいます。

しかし、bodyよりさらに上位の要素(この場合html)で背景画像が利用されているとbody:afterでbody-bottom.pngの背景画像が読み込めます。

;;html { background-image:	url(""); }
body:after {
display:		block;
background-image: 	url("body-bottom.png");
}

ちなみに、;;htmlはOpera9にのみ適応するCSSハックです。

コメント（0件）