[Webkit-unassigned] [Bug 57441] New: A combination of float/margin/first-child causes strange behaviour

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=57441

           Summary: A combination of float/margin/first-child causes
                    strange behaviour
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: PC
        OS/Version: Windows 7
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: webkit_bugzilla at mindcontrolled.nl


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.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.