この2週間ほど仕事ががっつり重なって、6日ぶりに外出・行き先はコンビニ・屋外滞在時間10分、みたいな日々でした。何年かぶりに徹夜もしました。朝日って、まぶしいよね…

普段、Webデザインするときはいかに簡単なコーディングにするかを考えながら作るんですが、多忙のため頭が回らず、ちょっと面倒なデザインにしてしまいました。あまり普段は使わない「position」を使って対応することにしたのです。が。IE6～全部で、その絶対配置した要素がまるっと消えちゃう。なにこれ。

で。対処方法をググりましたところ
jmblog.jp – IEで絶対配置（position:absolute）のボックスが消えるバグの検証
こちらのブログを参照しました。問題が発生するのは以下のケース。以下4行転載。

• position:absolute が float と hasLayout をもつ clear の直前に存在する場合。
• position:absolute が float と hasLayout をもつ clear との間に存在する場合。
• position:absolute が width:100% の float の直前に存在する場合。（IE6以下のみ）
• position:absolute が width:100% の float の直後に存在する場合。（IE6以下のみ）

floatはあってもなくても発生するのね…。
対策としては、「divを追加する（ボックスの中身は空で可）」。
もしくは、「hasLayoutプロパティを持たない clear を使う」。

http://blog.4galaxy.net/19.html
上記サイトを参考にしました。

今回使用したのは、このうちの
【番外】 iGoogleのように時間によって切り替える
の部分。
時間によってjavascriptでCSSを切り替えることができる。

あんまりコーディング作業ってしないので、これってちょう今更だとは思いつつ…。

——————————-
floatにマージンを指定すると、
IE6以下で指定の2倍のマージンが出来てしまう件は、
「display： inline;」を追加して解決。

floatが指定された要素は親BOXの高さとは無関係になる。
親BOXがfloat要素全体を含むように変えるためのCSSハックが
「clearfix」
——————————
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

/* Hides from IE-mac ¥*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hides from IE-mac ¥*/
——————————
これを「class=”clearfix”」のように指定するのが一般的。
もしくは、xhtml側で組み込まずにCSS側で「.clearfix」の部分を該当クラス名（＝親BOXのクラス名）に置き換える