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>
<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>
<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>
<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>
<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>
<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>
<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>
<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" />
</a>
<!-- End Thumbnail Images -->
</div>
Here is the CSS:-
#productImageThumbs_area{
border-top:2px solid #999999;
border-left:2px solid #999999;
margin:15px 16px 15px 0px;
width:262px;
float:right;
padding:0;
}
.thumbGallery{
border-right:2px solid #999999;
border-bottom:2px solid #999999;
width:129px;
height:126px;
display:block;
float:left;
}
Everything looks good in all other browers except IE - any ideas how to work around this? many thanks!!