- ベストアンサー
IE6でどうしても隙間が空いてしまう。
ドロップメニューをjavascriptとcssで現在デザインしています。 目標はadobeのような形を目指しているのですが、 参考書→英文法・英単語・英熟語 の”→”の部分でIEのみ隙間(1px)が発生してしまいます。 コードは大まかにjavascriptなどを省くと <li> <span id="hoge">参考書</span> <dl id="hoge2"> <dd>英文法</dd> <dd>英単語</dd> </dl> </li> という感じで、spanとdlのmarginやパディングなどもcssで0にしてあるのでくっついて欲しいところなんですがくっつきません。 firefoxではくっつくのですが・・・ あと、spanの部分のディスプレイはblockです。 何か解決のヒントになるようなヒントをお持ちの方は情報提供お願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
テストケース作ってみたが、いずれによっても再現しない。 IE6 on WinXP Pro SP2[EN](VPC) Safari 3.0.1Beta on WinXP Pro SP2[EN](VPC) IE7 on WinXP Pro SP2[JA] Minefield(Firefox 3.0a6pre) on WinXP Pro SP2[JA] Opera 9.21 on WinXP Pro SP2[JA] >spanはインラン。dlはブロック そのために span要素のdisplayプロパティがblockだと質問文で述べてある。 >→の部分 span要素の下辺と続くdl要素の上辺だと思われる <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>テストページ(testcase)</title> <style type="text/css"> ul#menu{ overflow:hidden; background-color:pink; } ul#menu li{ float:left; width:25%; background-color:yellow; list-style-type:none; } ul#menu li span{ display:block; margin:0; padding:0; background-color:yellow; } ul#menu li dl{ display:block; margin:0; padding:0; background-color:green; } ul#menu li dd{ display:block; margin:0; padding:0; background-color:red; } </style> </head> <body> <!-- himajin100000は使ったこと無いところばかりだ。--> <ul id="menu"> <li> <span>言語仕様</span> <dl id="specification"> <!-- 多分li要素につけた方が楽だと思う--> <dd>HTML 4.0</dd> <dd>XML 1.0</dd> <dd>Ecmascript</dd> </dl> </li> <li> <span>サンプルコード</span> <dl id="samplecodesearch"> <dd>Koders</dd> <dd>Google Code Search</dd> </dl> </li> <li> <span>ユーザコミュニティ</span> <dl id="Community"> <dd>SourceForge</dd> <dd>VSUG</dd> </dl> </li> <li> <span>その他</span> <dl id="misc"> <dd>これが入っていないぞ！</dd> <dd>これは違うだろ！</dd> <dd>管理者へのひとこと</dd> </dl> </li> </ul> </body> </html>
その他の回答 (2)
>spanとdlのmarginやパディングなどもcssで0にしてあるのでくっついて欲しい spanの直後にdlだかじゃない？ spanはインラン。dlはブロック spanをdiv辺りでくくったらどうなる？
お礼
回答本当にありがとうございます。 spanをdivでくくってspanをinlineにしてみたのですが、やはり同じ現象が現れました。IE7もそうで、他のブラウザ(opera,netscape,firefox)は全て大丈夫なのですが・・・ divでくるまずspanをinlineにしてやってみたところ大丈夫なのですが、spanに高さを持たせ背景に画像などをon mouse で表示させたいので妥協できないんですよね・・・ とりあえずもう少し頑張ってみることにします。
- yambejp
- ベストアンサー率51% (3827/7415)
そもそも「→の部分」とおっしゃる箇所が見当たりませんが・・・
補足
→というのはspanとdlの間という意味でした。 分かりにくくて申し訳ありません。
お礼
コードまでありがとうございます。 ひょんなことから解決いたしました。 若干記述していないdivコードが邪魔をしていたらしく、それを削除したところ問題が解決いたしました。 コードを参考にしながら直していたので、コードは非常にありがたかったです。本当にありがとうございます。