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;
}
No.1
379
52
10pt
IE6の表示はバグによる誤った表示です。
IEでは内容がブロックからはみ出した場合に、勝手に高さが広がってしまいます。
Firefoxの表示が正しいはずですが、これは後続の要素で「clear: both;」として、フロートを解除することで正しく表示されるようになります。
こちらのページも参考になるかと思います。
No.2
50
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は効いていますが、
オーバーフローしていただけというのが理解できると思います。
2
97
93
おおー！！ちゃんと効きましたー！
ご説明いただいた内容もわかりやすかったです。
勉強不足でしたね。。恥
有難うございましたです。