CSSレイアウトとか

デザイン微調整終了。とりあえず IE6 と Firefox1.5 で見たかぎりは崩れてないようなので良いことにします。

しかし CSS てのはなんかもうややこしくて意味わかんなくて面倒くさいな…!こんなどこにでも転がってそうなよくあるレイアウト作るのにも一苦労ですよ。デザイナさんたちはいつもこんなのと闘っておられるのですね。すごいよ。

以下メモ程度に。

height 指定がシカトされる

なんで反映されないのかなーってむかしから不思議だったけどまあいいやって放置してたのでした。調べてみたら、親要素に height が指定されてないとなんか無視されちゃうらしい。
なので body,html{height:100%;} とかやっといたらいいらしい。へぇーへぇーへぇー。

line-height の継承がなんかきもい

body に line-height:140% を指定。で、左メニューのリストとかで font-size:90% とかすると異様に行間が開く。140% っていう割合じゃなくて行間の数値そのものが継承されてるぽい。line-height:140% をもっかい指定しなおしてやるとうまくいきました。
# フォントサイズ大きくすると上下の行とかぶる、という現象もこれが原因ですね。

float 使ったら背景色とかなんかいろいろうまくいかなかったりとか

float な要素しか含まないボックスは高さがなくなっちゃうよ、とかなんかそういう仕様らしい。で、ややこしいことに、親要素に width 指定してやると IE では直ったように見える、と思いきやこれは IE のバグらしい。
検索したけどこれといった解決法が見当たらなかったのでとりあえず float 以外のもんがあればええんやろー!と、無意味なホワイトスペースとか入れてやったら一応見れるようにはなりました (厳密には解決してない…)。 なんかちゃんとした解決法とかあったら教えてください。

   ***

よし、ちょっとはためになりそうな日記になりました。この調子でいきます。
でもこんなんばっかりだと一部の人以外には意味不明になりそうなので普通の日記も書きます。(心配しなくてもこんなんばっかりは書けません。)