Bug Tracker

Opened 11 years ago

Closed 10 years ago

Last modified 8 years ago

#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)

ie8-margin-collapsing-when-element-added-dynamically.zip (57.2 KB) - added by johnb 11 years ago.
test cases; static version, dom methods version, jquery version

Download all attachments as: .zip

Change History (6)

Changed 11 years ago by johnb

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

comment:1 Changed 11 years ago by johnb

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

comment:2 Changed 11 years ago by dmethvin

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 11 years ago by 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.

comment:4 Changed 11 years ago by johnb

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

comment:5 Changed 10 years ago by dmethvin

Resolution: worksforme
Status: newclosed

Hooray!

Note: See TracTickets for help on using tickets.