ドロップメニューをjavascriptとcssで現在デザインしています。目標はadobeのような形を目指しているのですが、参考書→英文法・英単語・英熟語の”→”の部分でIEのみ隙間(1px)が発生してしまいます。コードは大まかにjavascriptなどを省くと参考書英文法英単語という感じで、spanとdlのmarginやパディングなどもcssで0にしてあるのでくっついて欲しいところなんですがくっつきません。 firefoxではくっつくのですが・・・あと、spanの部分のディスプレイはblockです。何か解決のヒントになるようなヒントをお持ちの方は情報提供お願いします。

IE6でどうしても隙間が空いてしまう。

解決済

質問者：shizkaz
質問日時：2007/06/20 16:40
回答数：3件

ドロップメニューをjavascriptとcssで現在デザインしています。
目標はadobeのような形を目指しているのですが、
参考書→英文法・英単語・英熟語
の”→”の部分でIEのみ隙間(1px)が発生してしまいます。
コードは大まかにjavascriptなどを省くと
<li>
参考書
<dl id="hoge2">
<dd>英文法</dd>
<dd>英単語</dd>
</dl>
</li>
という感じで、spanとdlのmarginやパディングなどもcssで0にしてあるのでくっついて欲しいところなんですがくっつきません。
firefoxではくっつくのですが・・・
あと、spanの部分のディスプレイはblockです。
何か解決のヒントになるようなヒントをお持ちの方は情報提供お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： himajin100000
回答日時：2007/06/21 01:21

テストケース作ってみたが、いずれによっても再現しない。

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.dt …
<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>

<ul id="menu">
<li>
言語仕様
<dl id="specification"> 
<dd>HTML 4.0</dd>
<dd>XML 1.0</dd>
<dd>Ecmascript</dd>
</dl>
</li>
<li>
サンプルコード
<dl id="samplecodesearch">
<dd>Koders</dd>
<dd>Google Code Search</dd>
</dl>
</li>
<li>
ユーザコミュニティ
<dl id="Community">
<dd>SourceForge</dd>
<dd>VSUG</dd>
</dl>
</li>
<li>
その他
<dl id="misc">
<dd>これが入っていないぞ！</dd>
<dd>これは違うだろ！</dd>
<dd>管理者へのひとこと</dd>
</dl>
</li>
</ul>

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

コードまでありがとうございます。
ひょんなことから解決いたしました。
若干記述していないdivコードが邪魔をしていたらしく、それを削除したところ問題が解決いたしました。
コードを参考にしながら直していたので、コードは非常にありがたかったです。本当にありがとうございます。

通報する

お礼日時：2007/06/21 03:00

No.2

回答者： noname#39970
回答日時：2007/06/20 17:41

>spanとdlのmarginやパディングなどもcssで0にしてあるのでくっついて欲しい

spanの直後にdlだかじゃない？
spanはインラン。dlはブロック
spanをdiv辺りでくくったらどうなる？

- 0
- 件

通報する

この回答へのお礼

回答本当にありがとうございます。
spanをdivでくくってspanをinlineにしてみたのですが、やはり同じ現象が現れました。IE7もそうで、他のブラウザ(opera,netscape,firefox)は全て大丈夫なのですが・・・
divでくるまずspanをinlineにしてやってみたところ大丈夫なのですが、spanに高さを持たせ背景に画像などをon mouse で表示させたいので妥協できないんですよね・・・
とりあえずもう少し頑張ってみることにします。

通報する

お礼日時：2007/06/21 02:44