Skip to main content

Bug Tracker

Side navigation

#4138 closed bug (worksforme)

Opened February 12, 2009 05:28PM UTC

Closed October 13, 2009 01:08AM UTC

Last modified March 14, 2012 02:57PM UTC

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 (5)

Changed February 12, 2009 05:32PM UTC by johnb comment:1

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

Changed February 14, 2009 03:10AM UTC by dmethvin comment:2

keywords: ie8 floatie8 float ready load

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?

Changed February 16, 2009 06:41PM UTC by johnb comment:3

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.

Changed March 20, 2009 06:46PM UTC by johnb comment:4

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

Changed October 13, 2009 01:08AM UTC by dmethvin comment:5

resolution: → worksforme
status: newclosed

Hooray!