IEとFireFoxの描画で・・・

zIndex 無効
divで囲ったいくつかのブロックを移動可能にして、さらに動かしているブロックを一番手前にするものを作った。
FireFoxではzIndexをJavascriptで変更してあげるだけでよいのだが、IEでは順番どおりに描画されなかった。position:relative 内に書かれていることが原因なのか position:absolute にすると描画順番が正しくなる。absoluteで絶対座標にするわけにもいかずJavascriptをちょいと変更することにした。IEでは再描画されないような感じだったので、zIndexを変更するところで

this.style.display = 'block';

を追加してみる。がこれだけでは再描画されないのかうまくいかず

this.style.display = 'none';

this.style.display = 'block';

のようにいったん非表示にしてもう一度表示させるとうまくいった。
こ、これでいいのか・・・・・・(￣ω￣;)？

FireFoxでFLASHをoverflow:hiddenすると
divで囲まれたFLASHコンテンツを配置。divのwidthは490px FLASHは500pxだとすると当然このままではdivが横に伸びる。そこでstyleでoverflow:hiddenを設定してあげるとIEではdiv内にきちんと収まるが、FireFoxでは収まらなかった(FLASHが手間に表示される)。文字の場合はhiddenはうまくいくがFLASHでは無理のようだ。
仕方がないのでFLASHのタグ内のwidthを変更することにした。はじめからこっちにすればよかったか・・・・。

jQueryはじめました(冷やし中華風味)
IEとFireFoxの違いにイライラしていた今日この頃。クロスブラウザ対策としてjQueryを使うことにした。もっとはやく使い始めればよかった。
ただ、slideToggle()を使ったときに変な現象がおきた。

<div style="float:left" >
　　<div> WINDOW </div>
　　<div> WINDOW </div>
</div>

<div style="float:left" >
　　<div> WINDOW </div>
</div>

上記の配置だと左に2つ 右に1つのWINDOWができる。
WINDOWは開閉式のメニューで上部にタイトルバーがあるフレームのようなもの(WindowShade)。タイトルをクリックすると下部のフレームが閉じタイトルバーのみの表示になる。最初は自前で作っていたのだが、idなどのぶつかり合いを避けるためclass属性を簡単検索してくれるjQueryを使用した。
slideToggle()を使って滑らかな開閉を実現できたのだがここで思わぬ動きをした。左側の開閉が行われている最中(アニメーション中)になぜか右側のWindowが左側の下に配置され、開閉が終了するとまた右側に戻る。
左右の分割をdivで行ったのが悪かったのだろうか？この現象はよくわからなかったので滑らかではないがslideToggle()をtoggle()にしてこちらで開閉することにした。

追記 2008年08月14日

上記のWindowの現象だが、原因はスタイルシートにあった。float:leftを使った場合は横サイズ等があるか、回り込み発生をしたくない場所はclear:bothなどを使用しているかで変わってくる。テーブルをなるべく使わないレイアウトにする場合は前後関係もしっかり見る必要がある。