日記/2007/08/30

Top / 日記 / 2007 / 08 / 30

2007年8月30日の日記 †

皮 †

PukiWikiのスキン、結局こんなカンジに落ち着いたけどどうでしょうか？
もう少し手を加える予定だけど、当分はコレでおっけーでしょ。
ちなみに普段常用してるブラウザはFireFOXなんで、主にコレでCSSをダラダラ書き換えて検討してたんだけど、ふと思いついてIE7で見てみたら、色々と違う部分があるんですよ。
まず最初にハマったのが、ヘッダの背景画像が表示されなかった事。
原因はコレでした。

修正前:
#header{
	background:url("http://masa-ya.jp/skin/masa-ya/masaya-header.png")no-repeat top left;
}

修正後:
#header{
	background:url("http://masa-ya.jp/skin/masa-ya/masaya-header.png") no-repeat top left;
}

結局URLを指定した後の、

半角スペース1個有るか無いか

が運命の分れ道でした。
まあ書式的には修正後が正しいワケで、これについては俺のミスですわ。
しかしだ、IEとソレ以外のブラウザをお持ちの方は、ウチのページを両方で表示してみてください。
ビミョーに違うんですよ。
それは、

コンテンツの枠の面取がIEだと出ない

んですよ。
というのも、これは元々ベースに使ったスキンで、こんなカンジで枠の面取りを実現してるんです。

.bar{
	background-color:#0000FF;
	word-break:break-all;
	padding:7px 15px 15px 15px;
}
.bar:before{
	margin:-7px -15px -9px -15px;
	line-height:0.1;
	font-size:1px;
	height:7px;
	content:url("top_left.png");
	display:block;
	background:transparent url("top_right.png") no-repeat top right;
}
.bar:after{
	margin:10px -15px -15px -15px;
	line-height:0.1;
	font-size:1px;
	height:7px;
	content:url("bottom_left.png");
	display:block;
	background:transparent url("bottom_right.png") no-repeat top right;
}

やってる事は、まず.barで枠を作って、.barに対する:beforeと:afterで上下に白い面取りの画像を両脇に置いてるワケです。
ところがIE7は、どうもこの:beforeと:afterという部分を解釈しないようなのだ。
もうね、ブチキレですよ。

スペース1コに厳しいクセしやがって

こういうトコロは放置プレイなワケですよ。
今アルバイト先のページもリニューアル必死でやってるんですが、こっちもレイアウトテーブルを使わないCSSレイアウト仕様で頑張るつもりがIE6のCSSバグで妥協の嵐でございます。
そんなけしからんIE6を

無かった事

にする為のIE7ちゃうんかいオンドレが。

↑