CSSを使ってスクロールバーつきのボックスを作成していますが、設定が一

質問

CSSを使ってスクロールバーつきのボックスを作成していますが、設定が一部反映されません。
詳しい方ご教授願います！！

・スクロールバーが出ずに指定した高さを超えてデカデカと表示される
・ボックスを囲む線が表示されない
・その他の設定（余白、色、フォント・・・）は指定通り表示される

外部CSSの記述は下記の通りです。
-----------------------------------
#main dl.info {
height: 130px;
overflow: auto;
margin-right: auto;
margin-left: auto;
padding: 10px;
border: 1px solid #cccccc;
margin-bottom: 1em;
}

#main dl.info dt {
font-weight: bold;
float: left;
}

#main dl.info dd {
border-bottom: 1px solid #cccccc;
padding-left: 8em;
}
-----------------------------------

ちなみに、mainは下記の通りです。
-----------------------------------
#main {
float: left;
margin-top: 20px;
margin-left: 40px;
width: 500px;
}

#main h2 {
font-size: 110%;
background-image: url(images/h2bg.gif);
background-repeat: no-repeat;
background-position: bottom;
padding-left: 10px;
color: #696969;
clear: both;
}

#main p {
padding: 2px;
}
-----------------------------------

htmlファイルへの記述は下記の通りです。
-----------------------------------
<div id="main">
<h2>更新情報</h2>
<dl class="info">
<dt>2010/11/11</dt>
<dd>ここに文章</dd>
<dt>2010/11/11</dt>
<dd>ここに文章</dd>
<dt>2010/11/11</dt>
<dd>ここに文章</dd>
<dt>2010/11/11</dt>
<dd>ここに文章</dd>
<dt>2010/11/11</dt>
<dd>ここに文章</dd>
<dt>2010/11/11</dt>
<dd>ここに文章</dd>
<dt>2010/11/11</dt>
<dd>ここに文章</dd>
</dl>

</div>
<!--/main-->
-----------------------------------

いくら見直しても書き直してみても、直りません・・・
きっと私がどこか抜けているか間違っているのだと思うのですが・・・
宜しくお願い致します！

回答No.3

kuzumiHK

提示された情報だけでhtmlを作成すると問題が出ませんでした。
そちらで提示された情報だけのhtmlを作成して表示するとどうなりますでしょうか。

また、ボックスを囲む線が表示されないブラウザとバージョンを、
ご提示いただくと原因がわかりやすいと思います。

現在の情報だけで推測できる原因は、
dlや.infoに対して、borderやoverflowを上書きする何かが指定されていることくらいでしょうか。

回答No.2

rurino

Clearfixを使っていませんか？
そこでdlを定義していると、そっちが生きちゃうかも…
（違ってたらごめんなさい）

回答No.1

k_yukichan

こんにちは。
ご質問内容の HTML と CSS で私もページを作成してみました。
この <dl> ～ </dl> 内に記載されている量だとスクロールバーが出るかでないかの境界あたりです。
もう少し量が増えるとスクロールバーが表示されました。

■各ブラウザでのスクロールバーの表示結果
・Firefox 3.6.6 ... 表示されます
・Safari 5.0 ... 表示されます
・Internet Explorer 8 ... 表示されず
・Internet Explorer 6 ... 表示されます

■結論
>スクロールバーが出ずに指定した高さを超えて...
dl の height:130px と
dl の padding:10px;(上下左右に効いている)
というCSSの記述でいくと dl の トータルの高さは
130px ＋ 10px ＋ 10px ＝ 150px となります。

■便利なツール
・ものさしpix
　http://www.vector.co.jp/soft/winnt/util/se282130.html
　デスクトップにものさしが現れ、ピクセル数や角度を測ることができるソフトです。
　このソフトで検証してみるのも面白いですよ。