【CSSについて】

firefoxで上下のpaddingが効かない(IE6では効く)です、、原因教えて下さい。
ソースは以下です。

<div class="contents">
<img src="#">
<div class="leftbox">
<ul>
<li>AAAA</li>
<li>BBBB</li>
</ul>
</div>

<div class="rightbox">
<ul>
<li>AAAA</li>
<li>BBBB</li>
</ul>
</div>
</div>

.contents {
margin: 0;
padding: 10px 0 15px 0;
width: 665px;
}

.leftbox {
margin: 0;
padding: 0;
text-align: left;
width: 332px;
float: left;
}

.rightbox {
margin: 0;
padding: 0 0 0 1px;
text-align: left;
width: 332px;
float: right;
}

回答の条件
  • 1人1回まで
  • 登録:2006/06/23 13:19:34
  • 終了:2006/06/23 14:12:19

回答(2件)

id:wizemperor No.1

wizemperor回答回数379ベストアンサー獲得回数522006/06/23 13:47:23

ポイント10pt

IE6の表示はバグによる誤った表示です。

IEでは内容がブロックからはみ出した場合に、勝手に高さが広がってしまいます。

Firefoxの表示が正しいはずですが、これは後続の要素で「clear: both;」として、フロートを解除することで正しく表示されるようになります。

こちらのページも参考になるかと思います。

http://www.mozilla.gr.jp/standards/webtips0021.html

id:ms-k No.2

ms-k回答回数5ベストアンサー獲得回数02006/06/23 13:52:27

ポイント60pt

.contentsのpaddingですね。

これちゃんと効いています。ただし、floatしているdivを内包しているので、.leftboxと .rightboxがオーバーフローしています。

まず.contentsに以下を加えてください。

width: 670px; /*ボーダー表示することで中身が幅不足になるのを防ぐためとりあえず少し大きくした*/

border: 1px solid #ff0000;

で、.leftboxに以下を追記

border: 1px solid #00ff00;

.rightboxに以下追記

border: 1px solid #0000ff;

これで今の状態がはっきりわかります(悩んだ時はボーダー表示させるのが近道です)。

中身がはみ出ているのが見えるはず。

で、解決策ですが、

.contentsに下記を追記します。

overflow: auto;

ということでpaddingは効いていますが、

オーバーフローしていただけというのが理解できると思います。

id:kentajoy

おおー!!ちゃんと効きましたー!

ご説明いただいた内容もわかりやすかったです。

勉強不足でしたね。。恥

有難うございましたです。

2006/06/23 14:10:48

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません