フッターのボーダーが消えてしまいます（cssとhtmlで2カラムのレイアウト）

質問

cssとhtmlで2カラムのレイアウトのウェブページを作っています。
左のカラムがナヴィゲーションメニューになっています。
フッターにborderを設定しているのですが、borderの上のラインが消えてしまうことがあります。

htmlはこんな感じです。
<div id="contents">
</div>
<div id="side"><!--左メニューここから-->
<ul id="menu">
<li>・・・</li>
<li>・・・</li>
<li>・・・</li>
</ul>
</div><!--左メニューここまで-->
<div id= "footer" ><!--フッターここから-->
Copyright・・・
</div><!--フッターここまで-->

実験してみたところ、左メニューの</li>の後に文字なり画像なりを加えるとボーダーは正常に現れ、
</li>で終わってしまうと、ボーダーが消えてしまうようです。

フッターに背景色をつけてみたところ、本来のフッターの領域からはみだして背景色がついていました。
やはり、</li>の後になんらかの文字を入れると、適正な位置に背景色がつくのです。

なぜでしょうか。

回答No.2

abril · ベストアンサー

質問者様のコンテンツのDOCTYPE等が不明なのでとりあえずHTML4.01 StrictのサンプルHTMLを作って検証してみたのですが、その限りではIE6、Firefoxいずれも下記の様な症状は見られないのですが…？
※XML宣言付XHTML1.1のサンプルでも同じでした。

> フッターにborderを設定しているのですが、borderの上のラインが消えてしまう
> 左メニューの</li>の後に文字なり画像なりを加えるとボーダーは正常に現れ、</li>で終わってしまうと、ボーダーが消えてしまう
> フッターに背景色をつけてみたところ、本来のフッターの領域からはみだして背景色がついて

※ちなみに、ulの直接の子要素として認められているのはliのみですので「</li>の後に文字なり画像なりを加え」る事はNGです。”</ul>の後”なら問題ないですが。

なので、現段階では適切な回答ができないのですが、提供されたCSSを見る限りでは幾つか「？」なスタイル設定が見受けられます。

(1)#side、#footerで"padding: 10 0 0 0;"、"padding: 10;"、という指定をされていますが、paddingの値は"em"や"px"等の単位識別子のついた数値で指定しないと無効になります。他の箇所で"margin: 10px 0 0 0;"と指定しているという事はおそらくpaddingに対しても"10px"という値を与えたかったのではないかと思いますが、現状では単位識別子が無い為全て無効（つまり余白は0）の状態です。

(2)#sideの子要素はul#menuだけですよね？であれば、このul#menuに対して"width: auto;"や"position: relative;"というプロパティが設定されている意味が不明です。ulはブロック要素ですので初期値で（この場合であれば）親要素#sideの幅一杯でレンダリングされますし、#sideに他の子要素がないのにpositionプロパティを使う必然性も見受けられません。

(3)bodyの直下に#contents（幅600px）と#side（幅200px）というそれぞれ左/右にフロートするコラム組のボックスが来ていますが、これだとウィンドウサイズを縮めて実質のレンダリング領域が600px＋200px=800pxより狭くなった場合、#contentsの下に#sideが落ちて回り込む（つまり2コラムではなくなる）事になりますが、想定済みの事でしょうか？

(4)ul#menu liが"float: left;"になっていますが、この意図は？実際に組み込まれるデータの内容がわからないので断定はしませんが、通常この様な左右2コラムで左がメニュー領域、というレイアウトだと、左のメニューのリストは通常「縦並び」になるパターンが多いと思います。が、ここではリストアイテムを収めるliが左にフロートしている為にちょっと奇妙なレイアウト（<li>～</li>内のデータ量に応じてレンダリング領域が変わりでこぼこに）になってしまっているのですが。仮に、この<li>～</li>の中の要素が幅200pxの画像データだったりすると一見気付かないかもしれませんが…
このメニューのリストはアイテム毎に「縦並び」ではないのですか？

(5)ul#menuの子要素のliが(4)で言及した様に「浮いて」しまっているので、親要素であるul#menuはその高さを認識できず、実質のul#menuの高さは0になってしまっており、子要素liは親要素を大きくはみ出す（ぶら下がる）状態になっています。これはulにheightプロパティで高さを与えるなり所謂clearfix等の小技で親要素内でフロート状態を解除する様な指定をしないと解消されません。ul#menuに一時的に背景色を塗ったりボーダーで囲ってチェックすると現在のul#menuとliの位置関係の状態が一目瞭然になります。
※ただしIE6では仕様に準じない解釈をするが為に子要素liがフロートしていても親要素ul#menuはその高さを認識して自動的にレンダリング領域を伸ばしてくれています。が、これはあくまでIEの独自解釈であり、正しい結果ではありません。

質問者様と同様の状態が再現されないので（解決するに一番確実なのは実際のコンテンツを参照させて頂く事なのですが…）納得の行く回答が差し上げられなくて申し訳ないのですが、とりあえず上記(1)～(5)について再度見直されて見てはいかがでしょう。以下は、それぞれの対処に関するアドバイスです。

(1)pxを付けて指定
(2)"width: auto;"と"position: relative;"は不要
(3)そういう仕様で良いならそのままで。想定外だったのなら、親要素で幅800px以上を確保。
(4)「縦並び」にしたいのであれば"float: left;"は削除。単なる「横並び」ならば"display: inline;"でもいけます。
(5)もし(4)で"float: left;"の必要がなくなったのであれば対処は不要。(4)に"float: left;"の必然性があるなら(5)で触れた方法で親要素ul#menuに高さを認識させる（ただし高さが成り行きにしかできないレイアウトであれば方法は限られるので注意。）

お礼

htmlをよーくみてみましたら、
#contents 中に</div>が余分にあるのを発見しました。
初歩的なミスで、お恥ずかしい限りです。

cssがかなり怪しいことが分かりましたので、本を買って、ひとつひとつどういう意味があるのか、よく見てみようと思います。
ありがとうございました。

補足

abril様
本当に詳しく解説してくださってありがとうございます！
学校もいかず、本も読まず、色々なサイトやテンプレートを参考にcssを作っているもので、実は意味が分からず貼り付けているものがいっぱいあります。
ご指摘していただいた箇所、とっても為になりました。ありがとうございます。

おっしゃる通り、たて並びのリストで、<li>の後は画像です。
> 左メニューの</li>の後に文字なり画像なりを加えるとボーダーは正常に現れ、</li>で終わってしまうと、ボーダーが消えてしまう
と書きましたが、</li>ではなくて、</ul>の間違いでした。
すみません。

ご指摘の箇所のcssを修正してみました。
でも、残念ながらfooterの領域がどうもおかしいみたいで、sideやcontentsの領域に入り込んでいるようです。（IE６でのみ）

回答No.1

noname#83877

cssも見せてもらえませんか？
あと症状が出るのはどのブラウザでしょうか。

補足

metametamuさん、ありがとうございます！
症状がでるのは、IE6です。firefoxでは大丈夫でした。
ＣＳＳはこんな感じです。

#contents{
margin:10px 0 0 0 ; padding:0 ;
width : 600px ;
float : right ;
text-align:left;
}
#side{
margin:0 ; padding:10 0 0 0 ;
width:200px;
float : left;
}
#footer{
margin:10px 0 0 0; padding:10 ;
clear : both ;
border-top:3px #4094CF solid;
}
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
}

ul#menu li
{
float:left;
margin:0;
padding:0;
}

ul#menu li a
{
float:left;
margin:0;
padding:0;
}

こんな感じです。
自分でネットで調べながらコーディングしているもので、
困っております。よろしくお願いします。