SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    38911 Basic Bytes Free johnuk's Avatar
    Join Date
    Jul 2008
    Location
    Somerset, England
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:-

    Code:
    <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:-
    Code:
    #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!!

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2011
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •