ｌiリストを使ったメニューバーの背景色が途中で途切れてしまうのですが、解決策をお教え下さい！

質問

以下のサイトをご覧下さい。
http://yazsan.net/pedalpower/index.html
このサイトではｌiリストを使ったメニューバーとなっておりますが、IE8やFirefoxなどの標準準拠ブラウザーでは背景色が途中で途切れてしまいます。どのようにすれば最後まで背景色を表示できるのでしょうか？お教え下さい！！！

回答No.1

riqua

はじめまして。ソース拝見しました。

これは「#navigation」の中にある「li」をFloat処理させているため、FxやIE8などでは、div「#navigation」をはみ出てHomeなどの画像が表示されている状態だと思います。
うまくお伝えできているか…。つまりdiv「#navigation」の中に納まっているのは、<br />や<hr />だけで、「li」の内容（縦幅）は「#navigation」内に納まっていないんですね。float本来の意味どおり、浮いちゃってるんです。

今回の場合は、単純に「#navigation」に対して、画像と同じ縦幅（height:24px）を明示的に与えてあげるだけで意図されている表示になると思います。
#navigation {
width: 100%;
height: 24px;
background-color:#8EA48E;
margin-top:30px;
}

また、オールマイティにこういった現象を回避するには、俗に言うclearfixなどを適応させると便利です。
（今回のもこれでも改善されるはず。）
clearfixについては、サーチエンジンで検索されると詳しい説明をされているサイトがたくさん見つかると思いますので、お好みでご覧になると良いかと思います。

お礼

スピーディーに、ご丁寧なアドバイス有難うございました。
height: 24px;で指定すれば問題が解決いたしました。有難うございました！！！