掲示板/スタイルシート質問板/過去ログ/一覧/ pタグで背景がずれる(firefox)

0 名前： らうる ： 2006/11/25（土） 17:36 ID:LlhZciIf: 色々と試してみたのですが、希望する動作ができないので質問させて頂きます。
※IE6では動作確認できるのですが、firefoxだとできません。

3カラムの左メニューなのですが、縦にいくつもの画像があり、そこをそれぞれcontainerとして背景指定しています。
container-a02タグ内にPタグでテキストを挿入すると5pxくらいの隙間がa01とa02の間にできてしまいます。

Pタグのmargin指定を変えると隙間も変わるのですが、実際にテキストを入れたい場所は指定しなければならないので･･･
他の指定が間違っているかもしれないので全てを消して下記状態にしてもfirefoxでは動作確認できませんでした。

どうかご教授お願い致します。

▲CSS
/*leftmenu*/
div.container-a01 {
background: url(01.jpg) no-repeat top left;
margin-left: 55px;
height: 145px;
}

div.container-a02 {
background: url(02.jpg) no-repeat top left;
margin-left: 55px;
height: 198px;
}

p.lead01 {
margin: 46px 20px 0 8px;
line-height: 140%
}

▲html
<div id="LeftMenu">
<div class="container-a01"></div>
<div class="container-a02">
<p class="lead01">このpタグを入れるとcontainer-a02の背景画像がずれてしまいます。</p>
</div>
</div>

1 名前： らうる ： 2006/11/25（土） 17:36 ID:LlhZciIf: LeftMenuのタグを記入し忘れていました。

/*left*/
#LeftMenu {
float: left;
width: 255px;
}

2 名前： くいん ： 2006/11/25（土） 17:36 ID:nM/3KUU4

以下のようにlead01のmargin上部分をcontainer-a02のpadding-topで代用する、というのはどうでしょう？
その際container-a02のheightをいじらないといけなくなりますが…。

div.container-a02 {
background: url(02.jpg) no-repeat top left;
margin-left: 55px;
height: 152px;
padding-top: 46px;
}

p.lead01 {
margin: 0px 20px 0 8px;
line-height: 140%
}

後は、container-a02の中の<p>の前に<div style="height:46px;"></div>を挿入しても見た目は狙った通りにはなります。
空ボックスになってしまいますけどね。

3 名前： らうる ： 2006/11/25（土） 17:36 ID:LlhZciIf: くいんさん、ありがとうございます。

container内に入れるテキストが上部だったり下部だったりと1つではないんです。
padding-topを入れる事ができません。
説明不足で申し訳ございませんでした。

テキストの度に空ボックスを入れるというのはなるべく避けたいと思っています。
この様なレイアウトの時の作り方が私は根本的に間違っているのでしょうか？

どうぞ宜しくお願い致します。

4 名前： くいん ： 2006/11/25（土） 17:36 ID:nM/3KUU4

ええと、じゃぁ、これだとどうでしょう？

p.lead01 {
padding: 46px 20px 0 8px;
margin: 0px;
line-height: 140%
}

marginをpaddingにしてmarginは0pxで余白でないようにしてみましたが…

5 名前： らうる＠外出先 ： 2006/11/25（土） 17:36 ID:lUvln6xL: くいんさん

教えて頂いた通りにすると、無事に動作確認ができました。
感動(;o;)
本当にありがとうございます！！