firefoxでのリストについて

質問

今までIEばかりでしたので、firefoxで表示した際のデザインの崩れについてなかなか理解できずにいます。
詳しい方にアドバイスを頂ければ幸いです。

divで１つ、大きな枠を作り、その中に2つのDIVを横に並べています。
左側のみwidthの指定をし、そのなかにリストで作ったメニューを入れています。問題はこのメニューで、メニューの下に画像や文字などを普通に続けて書きたいのですが、メニューの後に書いたものが、メニューの後ろ側に表示されてしまいます。
分かりにくいと思いますが、要するに、メニューと重なってしまう状態です。メニューの後に書いた文章が、メニューが存在しない場合の位置に表示され、その上にメニューが覆いかぶさるように重なって表示されています。
どうすればいいのでしょうか？
下記がCSSとHTMLです。

CSSーーーーーーーーーーー
#big{
margin:auto;
padding: 0px;
background-color:#ff0000;
WIDTH: 800px;
height: 100%;
}

#left{
FLOAT: left;
WIDTH: 180px;
height: 100%;
margin-right: 50px;
margin-left: 0px;
text-align: center;
background-color: #FFFFFF;
}

#center{
text-align: left;
background-color: #ffffff;
}

ul.menu {
margin-left: 0px;
margin-right: 0px;
margin-top: 5px;
margin-bottom: 5px;
padding: 0px;
height: 40px;
width: 150px; /* 幅 */
background-color: #ffffff;
list-style-type: none;
}

ul.menu li {
margin: 0;
padding: 0;
font-size: 15px; /* 文字サイズ */
font-weight: bold;
}

ul.menu li a {
padding: 11px 20px;
display: block;
color: #000099;
　　　　 background-image: url(menubotan.gif);
text-decoration: none;
}

ul.menu li a:hover {
color: #d63300;
background-image: url(menubotan2.gif);
}

htmlーーーーーーーーーーー
<div id="big">
<div id="left">
<UL class="menu">
<li><a href="index.html">TOPページ</a></li>
<li><A href="mainpage.html" target="_self">メインページ</A></li>
<li><A href="matsuri.html" target="_self">祭りについて</A></li>
<li><A href="sannka.html" target="_self">参加申し込み</A></li>
<li><A href="kanbu.html" target="_self">幹部紹介</A></li>
<li><A href="syozaiti.html" target="_self">所在地</A></li>
<li><A href="pics.html" target="_self">動画・写真館</A></li>
<li><A href="bbs.html" target="_self">掲示板</A></li>
<li><A href="links.html" target="_self">リンク集</A></li>
<li><A href="otoiawase.html" target="_self">お問い合わせ</A></li>
</ul>
<br>
ここに書いた文字をメニューに続けて表示させたいのです。
</div>
<div id="center">
メイン内容
</div>
</div>

回答No.4

nobuoka · ベストアンサー

> ちなみにもう1つ質問なのですが、liとliの縦方向の間隔を広げたいのですが、
> どこをいじるのが一番いいんでしょうか？

要素同士の間隔を空けるのは、一般的には margin を使って調整します。
今回の例の場合だと

ul.menu li {
margin: 0;
margin-bottom: 0.5em; /* <= 追加 */
padding: 0;
font-size: 15px; /* 文字サイズ */
font-weight: bold;
}

という感じで margin-bottom を設定すれば li 要素の下に隙間ができます。
ただどんな場合でも margin で調整するのが良いというわけではなくて、デザイン面との兼ね合いで padding を使って調整したりその他の方法を使うこともあります。 そういうのは色々試して慣れるしかないですね。

＞ abril さん
> またNo.1様の回答と時間差で被ってしまいました事もお詫び申し上げます。

abril さんの回答の方が詳しいですし別に被っても問題ないですよー。

お礼

ありがとうございます！
教えていただいたように変えてみるとできました！！

色々と試しながら覚えていこうと思います。
どのブラウザでもきれいに表示となると、中央寄せするだけなのに
divをもう1つ使うハメになったり、根気がいりますね～．．．。
早くnobuokaさんみたいにCSSを上手に使えるようになりたいです。

回答No.3

abril

No.2です。訂正です。

【誤】上下マージンも5pxづつあるので、
【正】（liの子要素の）aの上下パディングも11pxづつあるので、

またNo.1様の回答と時間差で被ってしまいました事もお詫び申し上げます。

お礼

分かりやすく説明して頂き、ありがとうございます！
まだ色々と分かっていない事が多く、もともとはどこかから
コピーしてきたものだったりと、なんとなくだったり
その意図が分からず変更してしまったり、もっと勉強しないといけないですね。

回答No.2

abril

ul.menu {
（省略）
height: 40px;←これを削除
（省略）
}

上記の指定がある為、ulの実際の内容が高さ40pxを超えた場合、超えた分ははみ出して後に続く要素と重なってしまいます。つまり、現状はulという親要素（ボックス）の高さから子要素liの大部分がはみ出してしまっているのに対し、ulが終了した後に続くテキスト部分はulの高さ40pxが終わった時点で描画されているのです。
＃IE6などでは、このheightプロパティの挙動が「仕様に沿っていない」為、指定してあるheightの高さより内包する要素の実際の高さがある場合には、内包要素が描画され終わる高さまで自動的にボックスのheightを伸ばしてしまうので、はみ出さずに見えるのです。
＃しかし、これは先に申し上げた通り正しくない挙動であり、Firefox等の描画状態が正しいのです。

本件の場合、リストアイテムの数が10個あり、しかもフォント・サイズが15pxもあり、上下マージンも5pxづつあるので、絶対に40pxの高さには収まりません。heightを指定しなければ成り行きでulの高さは「全てのliの内容が入りきるまで」伸びますので、下に続く要素と重なる事はありません。こういうレイアウトの場合は通常、heightは指定しません。

回答No.1

nobuoka

CSS の ul.menu 内の
> height: 40px;
を削除すればいいと思うのですがどうでしょうか？

お礼

あら！！本当ですね！何でこんなところに40pxが．．．？
ちゃんと表示できました！ありがとうございました！
ちなみにもう1つ質問なのですが、liとliの縦方向の間隔を広げたいのですが、
どこをいじるのが一番いいんでしょうか？
IEでもfirefoxでも同じように表示させるのって難しいんですね。