IE8RC1 disappearing margin above floated element

[johnb]

I've encountered a strange issue where adding an element after a floated element, makes the bottom margin of the element before the floated element disappear.

I figured this might be an issue with IE8 RC1, but if I use regular DOM methods instead of JQuery, the margin does not disappear.

My test-case HTML/CSS looks like this...

css... <pre>#p1 {margin:100px 0;border:1px solid #000;} #p2 {float:left;} #p4 {margin:50px 0;} body * { background-color: yellow; }</pre>

html... <pre><p id="p1">1: Some text with a 100px top/bottom margin</p> <p id="p2">2: floated element, new element added after this one</p> <p id="p4">3: random line of text</p></pre>

jquery... <pre>$('<p id="p3">INSERTED TEXT</p>').insertAfter("#p2"); or $("#p2").after('<p id="p3">INSERTED TEXT</p>');</pre>

A few observations...

• If you drop the "border" from #p1, #p1s' margin does not disappear. Further, I found that padding also triggers the disappearing margin.
• If #p2 is not floated, #p1s' bottom margin does not disappear.
• If you apply the border via javascript (ie $(elem).css("border","...")), the bottom margin does not disappear.
• If #p4 is removed, #p1s' bottom margin does not disappear.

I've attached a zip with test files.

[johnb]

test cases; static version, dom methods version, jquery version

[johnb]

Sorry for the bad formatting. First time logging a bug and couldn't find a link for formatting options.

[dmethvin]

Man, this is a puzzle. Your test case is really thorough, thanks for putting it together. I stepped through it with the IE8 debugger and the final styles don't look any different in the DOM and jQuery cases.

However, change the .ready() to a .load() and it does work correctly. Go figure. So I took the DOM code and put it in a {{{.ready()}}; sure enough the bug was there.

This seems to be some side-effect of the .ready() code; perhaps it's firing before all the styles have been applied. Is there some way to file a bug with the IE team?

[johnb]

Yes, Internet Explorer does have a ​feedback/bug tracker site. I would help out and leave a bug report for this, but, forgive me, I don't entirely understand the explanation. The .ready() code is jQuery, not IE.

[johnb]

Just confirmed that this bug is not in the final version of IE8.

[dmethvin]

Hooray!