<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;

回答No.1

DrFell · ベストアンサー

mahalo1114 さんの思いとは別に、ソースがいろいろと間違っているから、上手くいかないんですよ。

ｃｓｓ以前に、htmを正しく書きましょう。<ul #menu>とか</div>>とか、ケアレスミスしていませんか？
cssもケアレスミスしています。閉じるべきところは閉じ、閉じすぎているところは削り……、もう一度よくご自分の書かれたソースを点検してみてください。

お礼

ありがとうございました。
確かにidが#になっていますね。cssとhtmlが混同してしまってました。
ありがとうございました。
今は隙間はありません。

回答No.2

outbrave

<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-->

それだけ全角スペース（□）が入っていたら隙間もできるでしょう。

お礼

ありがとうございます。

しかしそれはスペースではありません。

htmlは階層構造に合わせてインデントを入れます。

その方が編集しやすく見やすいからです。

スペースではありません。