Premetto che sono alle prime esperienze con i CSS...

Non riesco a capire perchè con questo foglio stile

codice:
.header {
	height:80px;
	text-align: right;
	background-image:  url("../pics/bg_top.gif"); 
	background-repeat: repeat-x;
	background-position: bottom;
}

.pic {
	margin: 0px; 
	padding: 0px; 
	border: 0px;
	height: auto;
	background-color: red;
}

.caption {
	height:80px;
	text-align: right;
	background-image:  url("../pics/bg_btm.gif");
	background-repeat: repeat-x;
	background-position: top;
}
la mia pagina HTML http://www.house42.net/htm/final_nav3_ie_test.html

codice:
<body>

<div class="content">
<div class="header"></div>
<div class="pic">
[img]../pics/111.jpg[/img]
</div>
<div class="caption"></div>
</div>

</body>
su IE 6 mi fa comparire una riga di 4 pixel sotto l'immagine. Vorrei che l'area rossa si vedesse solo a destra dell'immagine.

Grazie...