どうしても画像がずれてしまいます

IE6とFirefoxで見た場合のズレについて

一枚の画像を3枚に分割してブラウザ上で1枚の画像に見せたいのですが、
Firefoxでは1枚の画像のように見えるのですが、IE6ではズレて見えます。
このズレを修正するにはどうすればいいのでしょうか。
分割の仕方はさまざまです。

左2枚、右1枚の場合
<div id="myjutaku">
<div id="m1"><img src="images/1.jpg" alt="" width="325" height="52" /></div>
<div id="m2">あいうえお、かきくけこ</div>
<div id="m3"><a href="index.html"><img src="images/3.jpg" alt="" width="148" height="99" /></a></div>
<br class="clear" />
</div>

CSS
#m{
width: 250px;
height:150px;
padding-top: 10px;
padding-bottom:10px ;
float:left;
}

#m1{
width: 250px;
height:50px;
}

#m2{
width: 250px;
height:100px;
line-height: 18px;
font-size: 13px;
padding-left:15px;
background-image: url(../images/2.jpg);
}

#m3{
width:400px;
height:150px;
padding-top: 10px;
padding-bottom:10px ;
float: left;
}

T型の場合
<div id="myjutaku">
<div id="my1"><img src="images/1.jpg" alt="" width="325" height="52" /></div>
<div id="my2">あいうえお、かきくけこ</div>
<div id="my3"><a href="index.html"><img src="images/3.jpg" alt="" width="148" height="99" /></a></div>
<br class="clear" />
</div>

CSS

#my{
width: 325px;
height:150px;
padding-right:10px ;
padding-bottom:10px ;
float:left;
}

#my1{
width: 325px;
}

#my2{
width: 172px;
height:99px;
padding-top:5px;
padding-left: 5px;
line-height: 18px;
font-size: 13px;
background-image: url(../images/3.jpg);
float:left;
}

#my3{
width: 148px;
float: right;
}