CSS alignment for 2 boxes

Hello everyone,
I've coded a template for a friend, and after coding i've found this problem with IE6,
This is how it's suppose to look (FireFox):

This is how IE6 shows it:

#latest {
	margin: 0px;
	height: 108px;
	width: 467px;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #0a0b0a;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}
#middle .naruto {
	background-image: url(images/latest_naruto.jpg);
	background-repeat: no-repeat;
	padding: 0px;
	height: 104px;
	width: 228px;
	display: block;
	float: left;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 4px;
}
#middle .bleach {
	background-image: url(images/latest_bleach.jpg);
	background-repeat: no-repeat;
	padding: 0px;
	height: 104px;
	width: 227px;
	display: block;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 4px;
	float: left;
}

HTML:

<div id="latest">
	<a href="#" class="naruto"></a>
	<a href="#" class="bleach"></a>
</div>

HTML:

Can someone help me with this one?

 

What's the black box on the right that says Join Now? Is that "Latest"? Naruto and Bleach are in box Middle... what's the whole big box around the three?

Were margins and padding set to 0 at the beginning of the CSS page? That zeros out any native browser margins or padding they may add. It also means you don't have to set all sorts of padding to 0 everywhere... for instance, you would only need padding-top: 3px; and not the padding:0's for the rest.

 

I'd also suspect quirks mode - though I'm not 100% sure without seeing the whole page.

 

fixed, thanks

 

#latest {
padding-left: 4px;
}
#middle .naruto {
margin-left: 0;
}