div タグの入れ子

前回  IE6 ハック でブログパーツのインストールで、色々試した。

ie6fixer を使って CSS を修正した、と思っていたが、さらに原因を解明しようと思って検証作業をした。
直ったと思っていたが、また同じように IE6 でレイアウトが狂ってしまう。

どうも原因は別の所に有りそうだ。

様々な原因を検討して、検証していたら、div タグの入れ子の状態を変えてみたらOKと成った。

imagenavi ブログパーツをサイドバーに入れたが、前回の状態では、確かにそのままでは正常に表示されなかった。
今回入れ子にしない方法を試してみたが、これも確か前回試したはず？

JavaScript を使ったブログパーツでは、IE6 に問題が出る事は確かなようだ。
＊後日 widget-content の padding に問題が有る事に気が付いた。


以下の方法ではNG、ウィジェットテンプレートにカウンター（daycount）と一緒に入れている。

<mt:If name="main_index">
        <div class="widget-content">
           <div class="daycount">
    　　<img src="<MTBlogURL$>daycount/daycount.cgi?gif">
           </div>

<div class="imagenavi">    
<script language="javascript" src="http://imagenavi.jp/lab/blogparts/bp.js"></script>
<script language="javascript">inBlogparts("1","1","7");</script>    
</div>

    </div>
</mt:If>


div class="daycount" div class="imagenavi" は、それぞれ CSS で設定済み。
<div class="imagenavi"> は、<div class="widget-content"> タグの入れ子に成っています。


以下の方法でOKと成った。

<mt:If name="main_index">
        <div class="widget-content">
    　　<img src="<MTBlogURL$>daycount/daycount.cgi?gif">
    　　</div>

<div style="text-align:center;">
    <div style="margin-top: -10px; margin-bottom: 10px; margin-left:auto;margin-right:auto;">
<script src="http://imagenavi.jp/lab/blogparts/bp.js" language="javascript"></script>
<script language="javascript">inBlogparts("1","1","7");</script>
    </div>
</div>

</mt:If>

ちょっと分かりづらいと思いますが、div タグのネストを良く見て下さい。
imagenavi の部分は <div class="widget-content"> に入っていません。


今回のブログパーツでは、javascript を使っているが、何故入れ子にすると IE6 でレイアウトが狂うのか、不思議だ。
色々ググったが、その事に触れているサイトは無い。