Hello, all -

I've been banging my head agaist this one for a while. I've tried many of the suggested float-fixes for IE and nothing seems to help. Any suggestions appreciated!

The issue is this: When pages are loaded in IE which have float:right elements (photos inside divs), they briefly position themselves correctly, then the margin-left value (10px) goes away and they are snug up against the text. An example is here:

http://pandora.cii.wwu.edu/showcase2.../portfolio.asp

If you refresh a couple times while watching one of the pictures on the right hand side, you (might) see what I mean (hopefully).

If not, and this is the weird part, open up the developer toolbar, select one of those float:right boxes, uncheck either the margin or the float property, then re-check it. The problem goes away. Why, oh why, oh why...

Thanks again.

Nick, WWU

I can't check IE right now, but I think I know roughly what's going on. IE7 and below has what's known as the double float bug or double margin bug. I don't think IE8 has the issue, but I think IE7 does.

When you float an element in one direction and also have a margin in the same direction IE doubles that margin. In your case you're floating an element right and I assume that same element has a margin-right applied to it. At first your page loads fine, but then when the doubled margin gets applied your elements gets pushed to the left.

There's a simple fix. Add display: inline to the element. Your element will still be a block level element, but it should fix the problem. Another option is to use conditional comments to half the margin for IE only. display: inline is the easier fix.

If that doesn't work then it's a different problem.

Steve hit the nail on the head, it's the doubled-float margin bug - you've got a right margin applied to a right-floated div - IE doubles the margin.