Bug 57441 - A combination of float/margin/first-child causes strange behaviour
Summary: A combination of float/margin/first-child causes strange behaviour
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows 7
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2011-03-30 03:51 PDT by Martijn T.
Modified: 2013-11-18 21:57 PST (History)
4 users (show)

See Also:

Screenshot of problem (52.21 KB, image/jpeg)
2011-03-30 03:53 PDT, Martijn T.
no flags Details
HTML for this problem (2.99 KB, text/html)
2011-03-30 03:54 PDT, Martijn T.
no flags Details
CSS for this report (2.23 KB, text/css)
2011-03-30 03:55 PDT, Martijn T.
no flags Details
Minimal scenario for WebKit Overflowed Float Bug (2.23 KB, text/html)
2011-04-13 13:54 PDT, Stijn de Witt
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Martijn T. 2011-03-30 03:51:52 PDT
Just registered to bring this to your attention. I was unable to find what is causing the problem illustrated in the attachment. It may be me, but seeing that Firefox 4 and IE8 render it as I would expect, I thought that it might be a bug. Searching on the terms that I think are related to the problem didn't give me any similar bugs but I may have used the wrong search terms.

In short, I've got two divs: one contains a logo, the other the top menu. The logo div is floating left and the top menu div is floating right. #topmenu contains a UL with 4 LI's. The LI's have a margin-left of 20 pixels to space them apart but using first-child I've removed the 20 pixels margin from the first element. In Gecko/20100101 Firefox/4.0 and in Trident in IE 8.0.7600.16385 64/32-bit this renders and measures as I would expect it to. In the latest Chrome and in Safari (Chrome/10.0.648.204 Safari/534.16) it renders differently. The last LI in de UL wraps, while it has enough room to expand a bit to the left.

I have measured all the individual elements contained in #top and #topmenu using Firebug for Chrome and DOM-inspector for Fx. All the elements have the same dimensions in both browsers. The last LI in the UL won't wrap, if I give #topmenu a fixed width that is the auto-size of 390 px + 20 px (mh, margin-left?) for a total of 410 pixels.

If I remove the first-child margin-left: 0; then I get another strange response from Chrome and Safari where the wrapping element seems to lose it's left-margin and vertical-aligns with the first element of the UL.

All the HTML and CSS involved will be attached for testing.
Comment 1 Martijn T. 2011-03-30 03:53:10 PDT
Created attachment 87497 [details]
Screenshot of problem

Mh, bugzilla didn't include the attachment. Here is the screenie illustrating the problem.
Comment 2 Martijn T. 2011-03-30 03:54:13 PDT
Created attachment 87498 [details]
HTML for this problem

HTML attached
Comment 3 Martijn T. 2011-03-30 03:55:24 PDT
Created attachment 87499 [details]
CSS for this report

Please put this in ./stylesheets/
Comment 4 Martijn T. 2011-03-30 14:24:54 PDT
I noticed that I can't select the right version for Webkit in de dropdown. If I'm not in the right spot for bugreports like this then please show me the way :)
Comment 5 Stijn de Witt 2011-04-13 13:54:14 PDT
Created attachment 89450 [details]
Minimal scenario for WebKit Overflowed Float Bug

I can confirm this bug. It renders fine in Firefox 4, Internet Explorer 9 and Opera 11, but not in WebKit.

I was able to reduce the test scenario a bit further. The resulting page is attached and can also be tested on my personal web space:
Comment 6 Stijn de Witt 2012-01-14 06:24:00 PST
It seems this bug is related to

https://bugs.webkit.org/show_bug.cgi?id=45274 and https://bugs.webkit.org/show_bug.cgi?id=58806

There is a patch ready for both these bugs but some tests are failing on it.
Comment 7 Stijn de Witt 2013-04-08 12:29:07 PDT
It seems this bug is now fixed. I just checked the demonstration page I made for it and it renders fine now in the latest Chrome (26.0.1410.43 m). So thanks for fixing whatever bug (Bug 58806 ?) was a duplicate of this one! I think it can be closed now.

Demonstration page:

Thanks for building WebKit!!