ie6で数px画像がずれる

質問

divに真ん中の背景を指定して
<div>
上の画像
～～～～～
下の画像
</div>
で角丸の背景を使ってデザインを実現したいのですが、なぜかIE6だけ画像と背景がずれています。
実際は～～～の部分にh2の画像とかを入れているのですが、これも同時にずれています。
他のブラウザと見比べると<div>＞画像の大きさでずれています。

これの解決方法や原因などご存じの方がいらっしゃいましたら教えてください！
お願いします・・・

<div class="r-contents">
<img src="img/r_bg_01.gif" />
<h2>画像<h2>
<p>テテキストテキストキスト</p>
</div>
<img src="img/r_bg_03.gif" />

#u-right img {
float: left;
margin: 0px;

}
#u-right .r-contents h2 {
margin: 0px;
padding: 15px 0 20px 0;
}

#u-right .r-contents {
background-image: url(img/r_bg_02.gif);
background-repeat: repeat-y;
}
#u-right .r-contents p {
margin: 0 0 0 0;
padding: 15px;
clear: left;
}

色々試してぐちゃぐちゃです・・・

回答No.1

hikachu

いまひとつ理解してないですけど。。。
<img src="img/r_bg_01.gif" />
ってことはXHTMLで書かれてるのかと思われ？（笑

utf-8で書いて
<?xml version="1.0" encoding="utf-8"?>
を省略はやってみましたか？？

先頭にXML宣言を書いてしまうと、IE6ではDOCTYPE宣言を無視してしまうため、「互換モード」で表示されてしまいます

ＣＳＳブラウザ別にＣＳＳ切り替えてみてはどうですか？