[SOLVED] unwanted margin when floating image within div

[johnny44]

When I float an image to the left or right within a div, I get an unwanted margin of 1px where the image meets the side of the div. If I don't float the image, there is no margin. This happens in IE. The attached screenshot shows the exact problem, where I used this css:

 

div{ 
background: white ; 
width: 300px ; 
height: 175px; 
padding: 0px ; 
}

 

and this html:

 

<div><img src="photo.jpg" width="250" height="175" style="float:none" /></div> <br/>
<div><img src="photo.jpg" width="250" height="175" style="float:left" /></div> <br/>
<div><img src="photo.jpg"  width="250" height="175" style="float:right" /></div>

 

Please see the screenshot. The yellow arrows show the unwanted margins. Is my css in error? How do I remove the unwanted margins in IE? (It's fine in Firefox.)

 

[attachment deleted by admin]

[JasonLewis]

I believe it's an IE6 issue.

 

Try using this:

.container {
float:left;
}

.img {
background:#ffffff;
width:300px;
height:175px;
margin:0;
padding:0;
}

 

Then, your page:

 

<div class="container"><div class="img"><img src="photo.jpg" alt="" /></div></div>
<div class="container"><div class="img"><img src="photo.jpg" alt="" /></div></div>
<div class="container"><div class="img"><img src="photo.jpg" alt="" /></div></div>

 

Hopefully that solves your problem.

[johnny44]

Ya, that does work. Enclosing the image itself within a div. Thanks a bunch, mate.