#4138 closed bug (worksforme)
IE8RC1 disappearing margin above floated element
Reported by: | johnb | Owned by: | |
---|---|---|---|
Priority: | major | Milestone: | 1.3.2 |
Component: | unfiled | Version: | 1.3.1 |
Keywords: | ie8 float ready load | Cc: | |
Blocked by: | Blocking: |
Description
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.
Attachments (1)
Change History (6)
Changed 14 years ago by
Attachment: | ie8-margin-collapsing-when-element-added-dynamically.zip added |
---|
comment:1 Changed 14 years ago by
Sorry for the bad formatting. First time logging a bug and couldn't find a link for formatting options.
comment:2 Changed 14 years ago by
Keywords: | ready load added |
---|
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?
comment:3 Changed 14 years ago by
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.
test cases; static version, dom methods version, jquery version