- 締切済み
Firefoxで文字がimgの裏側に入ってしまう
CSSでHPを作成しています、 ie6・7・8では下記ソースheader部分にimgを入れて<p>・・・</p>で 文字を上に表示しています、 ie6・7・8では思い通り表示されますがFirefoxでは<p>・・・</p>の文字が表示されません、imgの下側（裏側）になっているのか？ 下記にソースとCSS記述を書きましたので解決方法を教えてください。 ソース記述 <body><!-- Container --> <div id="container"><!-- Header --> <div id="header"><img src="img/logotop.gif" width="800" height="143" /> <h1>ブルベリーパン</h1> <p>ブルベリーパンを作って39年、厳選された素材と<br /> 熟成されたパン生地が生み出す匠の味、1日限定350個<br /> </p> <dl> <dd>：：：：：：：：：：：：：<br /> ・・・・・・・・・・・・・・・・・<br /> ・・・・・・・・・・・・・・・・・<br /> <dd> </dl> </div> CSS記述 #header{ margin-bottom : 0px; } #header h1{ font-size : 8px; color : #4a7aab; font-weight : 100; margin-top : -144px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } #header p{ font-size : 13px; color : #000000; margin-top : 4px; padding-left : 3px; line-height : 1.6; margin-left : 10px; padding-top : 65px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; width : 500px; float : left; } #header dd{ font-size : 13px; color : #4a7aab; margin-top : 0px; line-height : 1.4; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; }
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- koumild
- ベストアンサー率100% (6/6)
同様のソースでlogotop.gifを透明画像にしたところ、確かに背面に文字が入っていましたね。パッと見ですぐにどこがというのは分かりませんが、logotop.gifの上に文字等を重ねたいのであれば、logotop.gifを背景として設定してはいかがでしょうか。 [HTML] <div id="header"> <h1>test</h1> <p>test</p> <dl><dd>test</dd></dl> </div> [CSS] #header{ padding:0px; background:url('img/logotop.gif') no-repeat; width:800px; height:143px; } #header p{ width:500px; float:left; } ご参考までに。根本的解決になっていなくてすみません。
お礼
最初は背景にしていたのですが印刷時に背景を印刷するにチェック入れないと印刷表示されなかったので背景指定をやめました、印刷用CSS で試したのですが各ブラウザへの対応も大変な労力なので、今回ソースに直接imgで組入れた次第です。
補足
position: relative;を追記したら解決しました！ #header p{ font-size : 13px; color : #000000; margin-top : 4px; padding-left : 3px; line-height : 1.6; margin-left : 10px; padding-top : 65px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; width : 500px; float : left; position: relative; }