背景画像をセットしたh1にmargin-topを記述すると、何と親divの背景まで一緒に移動してしまう
何を直しても直らず困っております。
h1タグに会社ロゴをセットするために会社ロゴをh1の背景にしました。
空タグじゃいけませんのでh1のテキストは入れて、それを-9999pxでセットしました。
マージンをセットしないとヘッダー最上部左上にぴったり配置されてしまうので、上と左にマージンをとって配置させたい位置にもってきたいのですが、驚いたことに、h1にmargin-leftとmargin-topを記述したところ、何と、親divの背景が一緒にmargin-topの数値と同じだけ下に移動してしまうんです。。。どうやって直せるでしょうか？？
以下、ソースです。
●HTML
------------------------------------------------------------
<div id="hdr_wrap">
<div id="hdr">
<h1 title="My Site"><a href="index.html">My Site</a></h1>
</div><!--/div id="hdr"-->
</div><!--/div id="hdr_wrap"-->
------------------------------------------------------------
●CSS
------------------------------------------------------------
body
{
margin: 0;
color: #333;
font-family: "メイリオ","ヒラギノ","ＭＳ Ｐゴシック","平成角ゴシック",sans-serif;
font-size: 80%;
line-height: 1.4em;
letter-spacing:1px;
}
h1
{
width: 228px;
height: 60px;
margin-left: 62px;
margin-top: 39px;
padding: 0;
color: #ccc;
text-indent: -9999px;
background: url(../img/cmn/hdr_vi.jpg) no-repeat left top;
}
h1 a
{
width: 228px;
height: 60px;
margin-left: 62px;
margin-top: 39px;
padding: 0;
border: 0;
text-decoration: none;
}
div#hdr_wrap
{
background:url(../img/cmn/hdr_bg.jpg) #252a2c no-repeat;
width:100%;
height:220px;
text-align: left;
}
div#hdr
{
display: block;
width:955px;
height:117px;
}
------------------------------------------------------------
●初期化CSS（このCSSは関係ないとは思いますが一応記載）
------------------------------------------------------------
* {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
color: #333;
font-size: 100%;
font-weight: normal;
font-style: normal;
text-decoration:: none;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,blockquote,table,th,td {
margin: 0;
padding: 0;
}
p {
margin: 0 0 1em 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
margin-left: auto;
margin-right: auto;
}
address,caption,cite,code,dfn,h1,h2,h3,h4,th,var {
font-style: normal;
font-weight: normal;
}
fieldset,img,abbr {
border: 0;
}
caption,th {
text-align: left;
}
q:before,q:after {
content: '';
}
a {
text-decoration: none;
}
img {
border: none;
vertical-align: bottom;
}
p.trs{
white-space: nomal;
margin: 5px 0px 0px 0px;
}
------------------------------------------------------------
宜しくお願い致します。
お礼
回答ありがとうございます。 なるほど、そういう仕組になっているのですね。 CSS側でIE7の時だけ、画像を適用せず、バックグラウンドを白にして、ボーダーに然るべき色をセットしました。