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.
Created attachment 87497 [details]
Screenshot of problem
Mh, bugzilla didn't include the attachment. Here is the screenie illustrating the problem.
Created attachment 87498 [details]
HTML for this problem
Created attachment 87499 [details]
CSS for this report
Please put this in ./stylesheets/
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 :)
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:
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.
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.
Thanks for building WebKit!!