A combination of float/margin/first-child causes strange behaviour

• Component: CSS
• Status: RESOLVED FIXED

[Martijn T.]

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.

[Martijn T.]

Created attachment 87497 [details]
Screenshot of problem

Mh, bugzilla didn't include the attachment. Here is the screenie illustrating the problem.

[Martijn T.]

Created attachment 87498 [details]
HTML for this problem

HTML attached

[Martijn T.]

Created attachment 87499 [details]
CSS for this report

Please put this in ./stylesheets/

[Martijn T.]

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

[Stijn de Witt]

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:
http://members.chello.nl/~sgm.jansen/WebkitOverflowedFloat/

[Stijn de Witt]

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.

[Stijn de Witt]

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:
http://members.chello.nl/~sgm.jansen/WebkitOverflowedFloat/

Thanks for building WebKit!!