【CSS】CSSでh1タグに背景を指定し、画像の中の任意の場所に文字を書き込みたいのですが、うまくいきません
【質問】CSSでH1タグに背景を指定し、画像の中の任意の場所に文字を書き込みたいのですが、上下に余計な空白ができてしまい困っています。
【狙い】高さ32pxの3枚の画像ABCを縦につなぎ合わせた、高さ96pxの一枚の画像(=***)をCSSでH1の背景にし、H1の内容に応じてHTML上でclassを変えて、背景をAにしたりBにしたり変えられるようにする。
【コード】
CSS
h1 {height: 32px;background-image: url(***);}
.a h1{background-position: 0 0;}
.b h1{background-position: 0 -32px;}
.c h1{background-position: 0 -64px;}
.a,.b,.c{margin: 0;padding: 0;}
/*-↓画像のタテの中心に文字を並べるためにpaddingをとります-*/
h1 .subject{padding-top:9px;margin: 0;}
HTML
<div class="b"> <!--←A,B,Cに画像を切り替えます。//-->
<h1><div class="subject">助けてください( T_T)</div></h1>
</div>
【現状】
IE7 H1の下に余計な空白ができてしまいます。
FireFox3 H1の上下に余計な空白ができてしまいます。
どうすればよいのでしょうか?どこを修正すればよいのでしょうか、また
代替案があれば教えてくださるとありがたいです。
お礼
ありがとうございます 素人なのでまず専門用語がわからず・・ このDTD宣言につてからしらべてみます!! 大変ありがとうございました