- 締切済み
CSS IEバグ リストの後の隙間を消したい
よろしくお願いします。 以下のメニューで、"sub_menu02" の下に隙間が出てしまいます。 IEのバグのようなのですが、回避方法ご教授願います。 *実際は、の部分はJAVASCRIPTによるプルダウンになってます。 --------------------------------------------------------------- <style> * { margin : 0; padding : 0; } body { margin : 0; padding : 0; background: #fafafa; } #slidemenu_sample { overflow:hidden; } #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } div#contentsArea div#sNaviArea{ width: 175px; float: left; } div#contentsArea div#sNaviArea dd{ width: 163px; background: #ffffff; } div#contentsArea div#sNaviArea dd ul{ width: 163px; list-style: none; } div#contentsArea div#sNaviArea dd ul li{ width: 163px; border-top: 1px solid #dddddd; margin: 0; padding: 0; display: block; } div#contentsArea div#sNaviArea dd ul li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li{ width: 153px; margin: 0 0 0 10px; display: block; background: #ffffff; } </style> <body> <div> <div id="contentsArea"> <div> <div id="sNaviArea"> <dl> <dd> <ul> <li><a href="">menu01</a></li ><li class="choice"><a href="">menu02</a><ul class="sNaviSmall"><li><a href="">sub_menu01</a></li><li id="slidemenu_sample"><a href="" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">sub_menu02</a><ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"><li><a href="">aaaaa</a></li><li><a href="">bbbbb</a></li><li><a href="">cccccc</a></li></ul></li ><li><a href="">sub_menu03</a></li></ul> </ul> </dd> </dl> </div> </div> </div> </div>
- みんなの回答 （4）
- 専門家の回答
みんなの回答
ちょいと確認。 レンダリングを正しく表示するFirefoxでの表示は以下に成ってますが、質問者は同じ表示に成ってますか？ IEでの表示は完全無視します。 （最初の書き込みでのソースで・・・） http://shagazo.com/a1/userlog/aides/img/20080730005539.jpg
- SAYKA
- ベストアンサー率34% (944/2776)
>ulのmarginとpaddingを0に指定しています 確か自分もなんか似たような苦労をした気がするなぁ ulの指定がしてあるのは判ったけど、 liも指定したらどうなるかな？ (menu_1内のliが隙間を作っている疑惑) もう一つの疑惑はやっぱり件の >sub_menu02</a><ul id="menu_1" この部分。 インラインとブロックが並列しているって事かな。 <li><a>sub_menu02</a><ul id="menu_1">・・・ ↓ <li><div><a>sub_menu02</a></div><ul id="menu_1">・・・ こうするとdivとulでblock同士のmarginって事になるから調整可能になると思うんだけど・・・
補足
参考意見ありがとうございます。 menu_1内のliの指定もしてみましたがダメでした。 >インラインとブロックが並列しているって事かな。 div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } にて、ブロック要素化しています。
- hana999999
- ベストアンサー率28% (28/99)
自分も原因は >sub_menu02</a><ul id="menu_1" にあると思います。 しかしながら、いろいろと試してみましたが、解決には結びつきませんでした。 少し強引ですが、自分的な解決策としては、 <li id="aaa"><a href="">sub_menu03</a></li> <style> #aaa{ top: -2px; position: relative; } <style> として、sub_menu03を位置指定で-2px程無理矢理上に移動させます。 ですが、これだとid="menu_1"が非表示から表示になったとき、 <li><a href="">cccccc</a></li> が-2px分高さが短くなってしまいます。 そこで <li id="bbb"><a href="">cccccc</a></li> <style> #bbb{ height: 25px; ←任意 } <style> というように、高さを持たせてあげると、見た目上は隙間が消えました。 もっとスマートなやり方があるんでしょうが、取り急ぎ、思いついたのはこれくらいでした。
補足
アドバイスありがとうございます。 確かにアドバイス通り指定してあげると、"sub_menu02"の下の隙間は消えるのですが、上に移動した分、"sub_menu03"の下に隙間ができてしまいます。 さらに、IE特有のバグのようなので、firefox等では、"sub_menu02"が移動分狭まってしまうのです。 私の方でも、スターハック等での回避方法を探しているのですが・・・ 引き続き回答お待ちしています。 宜しくお願いします。
- SAYKA
- ベストアンサー率34% (944/2776)
>sub_menu02</a><ul id="menu_1" ulのmarginとpaddingが0になってないだけなんじゃ？ パっと見だから違うかも。
補足
アドバイスありがとうございます。 #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } の部分で、ulのmarginとpaddingを0に指定しています。
お礼
質問者のfreakaleです。 div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } の部分を、 div#contentsArea div#sNaviArea dd ul li a{ display: block; margin: 5px 0 5px 17px; } に変えることで、IE側で希望通りの表示になりましたが、 IE7以外のモダンブラウザでは崩れてしまいました。 ので、今回は結局以下のようにハックを使うことで回避することにしました。 /*IE6以下、IE7用*/ *:first-child+html div#contentsArea div#sNaviArea dd ul li a{ display: block; margin: 5px 0 5px 17px; } * html div#contentsArea div#sNaviArea dd ul li a{ display: block; margin: 5px 0 5px 17px; } /*IE7以外のモダンブラウザ用*/ html>/**/body div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } アドバイスしていただいた方、どうもありがとうございました。
補足
aidesさん、どうもありがとうございます。 私の方でも、リンク先の画像の通りに表示されています。 div#contentsArea div#sNaviArea dd ul li a{ display: block; ←これを削除 padding: 5px 0 5px 17px; } すると、見た目は変わってしまいますが、バグは無くなるようです。 バグ自体は 【display: block】指定されたリストアイテムの後に隙間ができる というものが絡んでいるようなのですが…。