IE背景消え対策

  • 2011.08.25 Thursday
  • 18:39
mootoolsとjQueryを一緒に使う方法でめでたく内容量に差があるボックスの高さをそろえるは完成したのだけど、IEで見てみたら、いろんなとこで背景やらボーダーやら消えまくり…。

ああーまたかよー、とがっくり。
IEはfloat使うと高確率で、ボックスの背景が消える。それも一回読んで、一瞬表示されるのに全部読み込みが終わると見えなくなってる、というなぞIE仕様。

参考サイト:IE6で背景が表示されない際にチェックすること

前にもやったけど、結局背景・ボーダーが消える要素に
position: relative;
をつけてやれば、ほとんど解決する。その要素にposition使ってなければだけど。

背景・ボーダーが消える要素にwidth指定という手もあるのだが、
floatを使って、入れ子のボックスにpadding、marginなんかを指定している場合、
すごくややこしいことになるので、position: relative;が使えないときの最後の手段にしてます。

しかし
position: relative; とそのまま書くのは、どうも釈然としない。IEにしか必要ないんだからなおさら。

というわけで
参考サイト:CSSハック一覧 -- IE, Firefox, Safariなどなど:
を参考にIEハックで書くことに。

position/*¥**/: relative¥9;

これでIE7,IE8のみに適応される。IE6以下はもう無視w。
こう書いておけば実際に必要なpositionと区別できるのでわかりやすいです。

ちまちまと各要素にIEハックをつけて、ようやく完成しました。へろへろ。

id名の大文字小文字のなぞ

  • 2011.07.08 Friday
  • 11:33
 CSSのid名に関してちょっと不思議な現象を発見しました。

div#Container ←外側ボックス、背景画像指定
div#contents ←本文部分 フロート右
div#MenuBox ←メニュー フロート左
div#footer ←フロートクリアしてフッター

という構造の場合、div#Containerの背景が1画面分しか表示されなくてスクロールすると消える、という現象が起きます。
これを防止するためにcssには

html, body {
min-height: 100%;
height: auto !important;
height: 100%;
}
#Container{
height:100%;
}

とhtml, body両方にも高さ指定する必要があります。

ところがこれ、
div#container
と小文字にすると、html, bodyの指定がなくても、背景消えません!

古いページを修正していて、id名大文字小文字がバラバラで気持ち悪かったので、div#containerをdiv#Containerに直したら、背景消え現象が発生して気が付きました。cssよく見てみたら、div#containerのときはhtml, bodyの指定してなかった…。

クラス名やid名に大文字が使えないというわけでもないのに、これはなんでしょうねー??
他のクラス名やid名でもこうゆうことはあるのでしょうか?

height100%適用方法メモ

  • 2009.11.26 Thursday
  • 13:42
コンテナ用のdivに
height:100%;
だけではうまく行かないし、min-heightやmax-hightをつけてもだめ。
結構前から悩んでて、大抵は内容が短いページに対応できるようなデザインで作ってた。
以下の方法でうまく100%ボックスになります。

参考:標準準拠でheight100%のボックス

html,bodyにもheight:100%;設定して
コンテナdivには
height:100%;
min-height:100%;
両方つける。

これだけだと1画面より長いコンテンツがあったとき
コンテナdivに指定した背景が消えます。
その解消に

body > #コンテナdiv
height: auto;

を指定してやれば、スクロールしても背景表示w

こんな単純な方法だったとはw

calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< March 2024 >>

たいやき

selected entries

categories

archives

links

profile

search this site.

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM