IE6／ブロック要素のliで入れ子がある場合に改行のような余計なマージンが入る

質問

タイトルの通りなのですが、
左側サイドにタブメニューを設置しようとしているのですが、
IE6のみ、余計な改行のようなマージンが入ってしまいます。
色々と調べたのですが、どうしても解決できなかったので、お知恵をお貸しいただければと思います。

HTMLは以下のように書いています。
＝＝＝＝
<div id="menu">
<ul id="navi-block">
<li><a href="#" onmouseover="MM_showHideLayers('p0','','show')" onmouseout="MM_showHideLayers('p0','','hide')">メニュー名</a>
<div id="p0" class="set">
<ul>
<li><a href="#">メニュー名</a></li>
<li><a href="#">メニュー名</a></li>
</ul>
</div>
</li>
<li><a href="#" onmouseover="MM_showHideLayers('p1','','show')" onmouseout="MM_showHideLayers('p1','','hide')">メニュー名</a>
<div id="p1" class="set">
<ul>
<li><a href="#">メニュー名</a></li>
<li><a href="#">メニュー名</a></li>
</ul>
</div>
</li>
</div>
＝＝＝＝

CSSは以下のように書いています。
＝＝＝＝
#menu { width:218px; position:relative; z-index:2;}
ul#navi-block {list-style:none;}
ul#navi-block li a {display:block;width:175px; height:30px;margin:0;padding:0.75em 25px 0 20px;background: url(../images/marker_square_gray_navi.gif) right center no-repeat;border-top:#CCCCCC 1px solid;}

div#p0 {left:220px; top:0;}
div#p1 {left:220px; top:0;}
.set { width:220px; position: absolute; visibility: hidden; z-index:3;}
＝＝＝＝

回答No.4

noname#83877 · ベストアンサー

ul#navi-block li { width:100%; vertical-align:bottom;}
これを追加すると直ったりしませんか？
バグみたいなものだと思いますが・・・

お礼

直りました！！！

metametamuさま、本当にありがとうございました。
今回は、大変勉強になりました。

お忙しい中、貴重なアドバイスをいただき
心より感謝いたします。

重ねて、ありがとうございました！！

回答No.3

karumakaruma

visibility:hiddenは不可視ですので
表示領域は残ります。
ただし、position:absoluteによる絶対位置指定を
行った場合、表示領域が残らないという特徴があります。
＃どちらにしろ絶対位置を指定していれば、表示領域が残っても
＃他に影響を与えないですが・・・

今回の場合、IE6以外のブラウザは上記の動きをちゃんと
行えているようですが、IE6は行えていません。

これは、<li>の中に入れているのにposition:absolute;を
使い、かつ位置の指定もしていないからでは無いかと思います。

class="set"のdivをどこに表示させようとしているかで
変更内容が変わるとは思いますが、
メニュー名
　　メニュー名１
　　メニュー名２
という表示にしたい場合は、visibility:hiddenをdisplay:none;
にして、position:absolute;を消せばいいと思います。

メニュー名　メニュー名１
　　　　　　メニュー名２

という様に右に表示したい場合は、<li>の外に出し
position:absolute; top:**; left:**;と
位置を指定すればいいと思います。
visibility:hiddenはそのまま

お礼

karumakarumaさま

お忙しい中、ご丁寧なご回答ありがとうございます。
そうなんです。絶対位置の指定だと、IE6での余計なマージンはでません。
アドバイス通りにやってみました。

ただ、今回は、ウィンドウの可変によって、
フレキシブルに対応できるメニューになるので、
.setのDIVをliの外に出してしまうと
親メニューと子メニューがうまく連動しなくなります。

したがって、親メニュー（position:relative）で
子メニューは（position:absolute）となり
子メニューDIVは、親メニューliの入れ子にしています。

また、以下に関しては、
＝＝
これは、<li>の中に入れているのにposition:absolute;を
使い、かつ位置の指定もしていないからでは無いかと思います。
＝＝
位置の指定を下記のようにしました。
div#p0 {left:212px; top:169px;}

それから、色々と検証してみて
親メニューのli aにdisplay:blockを入れるとIE6でのマージンが発生するようです。

重ねて、お忙しいところ、ご丁寧にご回答くださり
本当にありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

li li {list-style-type: inside}
または
li {list-style-type: inside}

これを追加でどうでしょうか？

お礼

talooさま

お礼が送れて申し訳ありません。
試してみたんですが、症状はかわりませんでした。
納期まで、もう少し時間があるのでがんばってみます。

本当にお忙しい中、貴重なアドバイスをいただき感謝しています。
ありがとうございました。

回答No.1

noname#83877

直接の回答ではないと思いますが最後の

</div>
</li>
</div>

は

</div>
</li>
</ul>
</div>

にするべきかと。

お礼

metametamuさま

早速のアドバイスありがとうございました。
確かにそうでした。早速修正しておきました。