WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
57441
A combination of float/margin/first-child causes strange behaviour
https://bugs.webkit.org/show_bug.cgi?id=57441
Summary
A combination of float/margin/first-child causes strange behaviour
Martijn T.
Reported
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.
Attachments
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
View All
Add attachment
proposed patch, testcase, etc.
Martijn T.
Comment 1
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.
Martijn T.
Comment 2
2011-03-30 03:54:13 PDT
Created
attachment 87498
[details]
HTML for this problem HTML attached
Martijn T.
Comment 3
2011-03-30 03:55:24 PDT
Created
attachment 87499
[details]
CSS for this report Please put this in ./stylesheets/
Martijn T.
Comment 4
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 :)
Stijn de Witt
Comment 5
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:
http://members.chello.nl/~sgm.jansen/WebkitOverflowedFloat/
Stijn de Witt
Comment 6
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.
Stijn de Witt
Comment 7
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:
http://members.chello.nl/~sgm.jansen/WebkitOverflowedFloat/
Thanks for building WebKit!!
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug