IE8 float issue with CSS

Question

I'm sure this must have been covered before because I'm sure I'm not the first to do this, but I can't find the answer. I am creating a shadow effect for a <div> using repeated background images. In the bottom two corners I use small 9x5 px images. I float them left and right and in Firefox and Safari they look perfect. In IE8 (and possibly other IEs) they float too far to the left and right about about 3px.

You can see the issue at here. It's an ebay template for my wife.

Thus far I've tried setting display:inline which was a fix for a similar IE6 issues. I also tried setting image margins and padding to 0px with no luck.

Any ideas?

Thanks, Carraig

Answer 1

I think it has something to do with the float elements getting outside the borders of the div, try inserting this before you close the parent div:

<div style="clear: both; font-size: 1px; line-height: 0px;"> &nbsp;</div>

Answer 2

Hey Carraig,

Whilst browsing your page I found that it is defaulting into quirks mode, which is the probable issue, because if I force it into Strict it seems to fix your floating problem in all cases of IE.

have a read of ppk's article here: http://www.quirksmode.org/css/quirksmode.html

he explains why its happening and how to fix it :)

Hope it helps!