I am floating 2 images in a div. On is floated left, the other floated right. In between is a repeated background and a simple form. In firefox, simply floating the images looks fine, but in IE, there is a small added space on the left side of the left float, and the right side of the right float where the repeated background image shows. How do I get rid of that added space? Here is the CSS: .search { position:absolute; right:0px; bottom:0px; width:250px; height:39px; background:url('site-images/search-bar-mid.gif') repeat-x; } .search-form { position:absolute; left:10px; top:10px; } Code (markup): And the HTML <div class="search"> <img class="float-right" src="site-images/search-bar-right.gif" alt="gfx" /> <img class="float-left" src="site-images/search-bar-left.gif" alt="gfx" /> <form class="search-form"> Search<input type="text"> <input type="image" src="site-images/search-bar-arrow.gif"> </form> </div> Code (markup):
It would help if you linked to a live page. I would need to see all of the CSS, not just the minimum.
Why would you ask about the floated images, yet not show us the css for those images? Now, I'm going to take a SWAG, and say that you have margins to the outside of those floats, and IE is doubling the margins, query? If that's it, add {display: inline;} to each class ruleset. cheers, gary
Sorry, I was working on this on my home computer, so there wasn't any live link. There actually was no other CSS except for: .float-left{float:left} .float-right{float:right} Code (markup): I should have added that. Sorry. I fixed it by adding a margin property for IE of -3 like: .float-left{float:left; margin-left:-3;} .float-right{float:right; margin-right:-3} html>body .float-left{margin-left:0} html>body .float-right{margin-right:0} Code (markup): That seemed to work perfectly, although, it's a bit more of a hack than I like.
Try posting the full HTML and CSS code. We can "proxy" images if we need to, but we'll need to know their full dimensions beforehand.