<div>と<div>の隙間を無くす方法
ヘッダーの<div>を作って、その下に横長（ヘッダーと同じ長さです）ナビのメニューの<div>を作りたいのですが、ヘッダーの下とナビの上に20ｐｘほどの隙間が空いてしまいます。なぜでしょうか？マージンを0に設定してもできてしまいます。
また、ナビメニューはボタンの画像にして文字を埋め込んであります。全部で6つです。それをulで右にフロートさせ、liを左にフロートさせています。DWで作っていますが、DWのプレビュー画面で確認すると、メニューがulで右にフロートしてありますが、liが左にフロートされてなくブロック状態で表示されます。しかし、IEやfirefoxなどのブラウザで確認すると、ちゃんとインライン表示されます。それが原因しているのでしょうか？
また、メニューボタンはjavascriptでスワップイメージにしました。
どなたかわかる方いらっしゃいますか？
とても困っています。できましたら至急にお願いいたします。
コードを載せておきます。
<div id="header">
<div id="aa">
<h1>*********</h1>
<h2>*********</h2>
<p>**********<br />
*************</p>
</div><!--aa-->
<div id="bb">
<p>********</p>
</div>><!--bb-->
</div><!--header-->
<!--navi-->
<div id="navi">
<ul #menu>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
<li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li>
</ul>
</div>
<!--navi-->
ヘッダー部分のcss
#header{
width: 800px;
height: 120px;
background-image: ***;
background-repeat: repeat-y;
margin: 0px;
}
ナビ部分のcss
#navi{
width: 800px;
height: 35px;
}
}
ul#menu{
float: right;
display: inline;
margin: 0;
}
li{
float: left;
margin: 0;
お礼
回答ありがとうございます なるほど！ そういう使い方があったんですね。 どのサイトをみても乗ってなかったので、助かりました。 IDを使うほどじゃないときに使用したら便利そうです。 これですっきりしました。 ありがとうございました＾＾