人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【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;
}

●質問者: kentajoy
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS firefox IE6 margin padding
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● wizemperor
●10ポイント

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

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

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

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

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


2 ● ms-k
●60ポイント

.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は効いていますが、

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

◎質問者からの返答

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

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

勉強不足でしたね。。恥

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ