Float left in quirksmode?

Hey guys,

I am developing an eBay template for my client so having to write for quirksmode (boo!).

I am trying to float some thumbnail images left, but in IE the float just isnt happening, also there is a 1px gap to the left of the images. Here is the markup:-

<div id="productImageThumbs_area">
	<!-- Thumbnail Images -->
	<a id="image_1" href="images/_v1_images/feature_image.jpg" class="lightbox" onmouseover="displayMainImage(this.href, 'Product A Name', this);">
		<img class="thumbGallery" src="images/_v1_images/thumb_1.jpg" alt="Gallery Image 1" width="129" height="126" />
	<a id="image_2" href="images/_v1_images/feature_image_2.jpg" class="lightbox" onmouseover="displayMainImage(this.href, 'Product B Name', this);">
		<img class="thumbGallery rightThumb" src="images/_v1_images/thumb_2.jpg" alt="Gallery Image 2" width="129" height="126" />
	<a id="image_3" href="images/_v1_images/feature_image_3.jpg" class="lightbox" onmouseover="displayMainImage(this.href, 'Product C Name', this);">
		<img class="thumbGallery" src="images/_v1_images/thumb_3.jpg" alt="Gallery Image 3" width="129" height="126" />
	<a id="image_4" href="images/_v1_images/feature_image_4.jpg" class="lightbox" onmouseover="displayMainImage(this.href, 'Product D Name', this);">
		<img class="thumbGallery rightThumb" src="images/_v1_images/thumb_4.jpg" alt="Gallery Image 4" width="129" height="126" />
	<a id="image_5" href="images/_v1_images/feature_image_5.jpg" class="lightbox" onmouseover="displayMainImage(this.href, 'Product E Name', this);">
		<img class="thumbGallery" src="images/_v1_images/thumb_5.jpg" alt="Gallery Image 5" width="129" height="126" />
	<a id="image_6" href="images/_v1_images/feature_image_6.jpg" class="lightbox" onmouseover="displayMainImage(this.href, 'Product F Name', this);">
		<img class="thumbGallery rightThumb" src="images/_v1_images/thumb_6.jpg" alt="Gallery Image 6" width="129" height="126" />
	<a id="image_7" href="images/_v1_images/feature_image_7.jpg" class="lightbox" onmouseover="displayMainImage(this.href, 'Product G Name', this);">
		<img class="thumbGallery" src="images/_v1_images/thumb_7.jpg" alt="Gallery Image 7" width="129" height="126" />
	<a id="image_8" href="images/_v1_images/feature_image_8.jpg" class="lightbox" onmouseover="displayMainImage(this.href, 'Product H Name', this);">
		<img class="thumbGallery rightThumb" src="images/_v1_images/thumb_8.jpg" alt="Gallery Image 8" width="129" height="126" />
	<!-- End Thumbnail Images -->

Here is the CSS:-

		border-top:2px solid #999999;
		border-left:2px solid #999999;
		margin:15px 16px 15px 0px;
		border-right:2px solid #999999;
		border-bottom:2px solid #999999;

Everything looks good in all other browers except IE - any ideas how to work around this? many thanks!!

The “img” tag gets a border in the “a” tag in I.E here.
So you can either add border=“0” to all your img’s or you can increase width:262px; to width:266px;