CSS - 黒澤 プログラムメモ

◆CSS

---

FireFoxで背景色が表示されない

<div id="container">
    <div id="floatLeft">float: left</div>
    <div id="floatRight">float: right</div>
</div>

包括したオブジェクトがfloatを指定されている場合、
包括しているオブジェクトのサイズがなくなってしまう。
その為、包括オブジェクトに背景色などを指定しても、
表示されない。
場合によっては下に配置したオブジェクトが、
float指定されたオブジェクトの右に表示されて、
レイアウトが崩れてしまう。
IEなどはバグでサイズがあるので、背景色が表示される場合があるらしい。

解決方法はサイズ指定するとか、
後に表示させたいオブジェクトが回り込んでしまう場合、
claer:bothなどが有効。

参考

relative指定したオブジェクトのz-indexは親要素のz-indexから指定される。

<div id="container">
    <div id="index-01"></div>
</div>

<div id="index-00"></div>

#container {
    position: relative;
}

#index-01 {
    position: absolute;
    z-index: 9999;
}

↑のcssで、一番手前に来るのはindex-00になる。
index-01はcontainerの子要素のうち一番手前に表示される。

index-01を手前に表示するには、
position:relativeではなくするか、
index-01をindex-00より後に記述するしかない。

結合したテーブルサイズ

結合したセルの幅をCSSで指定した場合、
Firefoxだと正常に幅が指定されるが、
IEだとうまく行かない場合があるらしい。

私が試した時は結合してないセルも
幅指定がうまく行かなかった。

結合したセルの幅に結合してない幅指定したセルの幅が
引っ張られて、小さい方が間延びしてしまった。

これを解決するにはpx指定ではなく、
%で指定するしかないらしい。

テーブル内テーブルとか作ってると
%使えなかったりして、ちょっとめんどい。

参考