※ ChatGPTを利用し、要約された質問です（原文：【CSS】Firebfox内でbackground-imageを使うって階層化すると・・・）
【CSS】Firebfox内でbackground-imageを使うって階層化すると・・・
このQ&Aのポイント
IE６では正しく表示されるのに、FireFoxだとずれてしまうという問題について、ご教授ください。
outboxの背景にbackground-imageをいれなければ問題ないのですが、いれるとinboxの位置がおかしくなってしまうのです。（outboxからのmarginが効かない）IEでは正しく（意図したように）表示されています。
test.gifは、outboxのwidthとheightにあわせて作成するか、widthをheightを変更してください。
【CSS】Firebfox内でbackground-imageを使うって階層化すると・・・
IE６では正しく表示されるのに、FireFoxだとずれてしまうという問題について、ご教授ください。
CSSで２つのBOX（outboxとinbox）と定義します。
outboxの定義の中にinboxを配置します。
outboxの背景にbackground-imageをいれなければ問題ないのですが、いれるとinboxの位置がおかしくなってしまうのです。（outboxからのmarginが効かない）IEでは正しく（意図したように）表示されています。
ソースは以下です。
test.gifは、outboxのwidthとheightにあわせて作成するか、widthをheightを変更してください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja">
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>test page</title>
<style type="text/css">
<!--
.outbox { margin-top:100px;
margin-left:auto;
margin-right:auto;
width:449px;
height:270px;
background-image:url("test.gif");
background-repeat:no-repeat;
}
p.inputbox {
margin-top:120px;
margin-left:110px;
}
-->
</style>
</head>
<body>
<div class="outbox">
<p class="inputbox">aa</p>
</div>
</body>
</html>
お礼
ご回答ありがとうございました。 marginで行うことしか考えていなかったので・・・。 こんなことで悩んでいたのがばからしいほどです。 ＃情けない。 ただ、実は他の解決方法もありました。 お答えをいただく前に気づいたのですが、outboxに borderを背景色でいれるとなんとちゃんと表示されるんです。 これも一つの回答かと思いましたので、一応書いておきます。