案件でプルダウンメニュー（メニューA）を実装した際に、左袖のローカルメニュー（メニューB）でも入れ子の実装をしていたために起こったバグ。メニューAがメニューBの背景に潜り込んでしまう。単純にCSSでz-indexをメニューBよりAの値を大きくすれば問題なさそうだけど、IE7で不具合。z-indexが効かない。IE7のz-indexにはこういう不具合があるらしい。

IE7限定なんだろうけど、z-indexは同一階層間での重ね順の前後を指定するもので、
グローバルに前後を指定するものではなかった

komacchi.com/blog

ググると色々解決策は出てくるが、どれもしっくりこない。海外サイトでjQueryを利用した解決策を発見し、無事解決。JavaScript上でz-indexをすべてのdivタグに設定しておけばバグは解消されるらしい。
(続きを読む…)

久々に中規模サイトのコーディングをいくつか担当することになったので、CSSの知識をアップデート。基本的な知識のみで実装してきたけど、本やネットで調べた内容をメモ。凄い効率的になるなあ。

子供セレクタの利用

こういうHTMLがあったとします。

<div id="content">
<p>ここを太字に</p>
<div>
<p>普通の文字</p>
<p>普通の文字</p>
</div>
<p>ここを太字に</p>
<!--/#content--></div>

Firefox等のモダンブラウザであればこんな感じでCSSを書けば解決。

#content  > p{
	font-weight: bold;
}

ただしIE6だと子供セレクタが効かないのでこう書く。

#content p {
	font-weight:bold;
}
#content * p {
	font-weight:normal;
}

ワイルドカードを挟めばいいのか！なるほど。
(続きを読む…)