327409 - List alignment problem with Apple iPod feedback page

Status: RESOLVED DUPLICATE of bug 316317

(Core :: Layout, defect)

Description

[Yuan Qi]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.0.1) Gecko/20060214 Camino/1.0
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.0.1) Gecko/20060214 Camino/1.0

See screenshots for a comparison of the rendering done by Gecko and Webkit (arguably the reference rendering for pages on apple.com)

Reproducible: Always

Comment 1

[Yuan Qi]

Attachment: Gecko rendering

Comment 2

[Yuan Qi]

Attachment: Webkit rendering

Comment 3

[philippe (part-time)]

I don't see this problem on my side (Camino 1.0, Firefox latest trunk). 

But it depends widely on the font-size used; my minimum font-size is set to 12px.

The problem, I think is that the checkbox is slightly taller in Camino then it is in Safari. On that page, the checkbox is floated left, and at small font-sizes, pushes the next line to the right.
What Camino does is correct in this situation.
(and Apple should review their coding practices, a simple clear:left in the stylesheet would fix the problem).

Comment 4

[Yuan Qi]

I just realized another problem with Camino's rendering.

If you look at how the text is aligned with the checkbox, you will realized that Camino placed the text higher than Safari. I don't believe this is the right way to render according to Apple's style guidelines for Aqua.

I think this bug is specific to Camino.

Comment 5

[philippe (part-time)]

Attachment: minimized test case

As coded on Apple's site.
I've put the list twice: once at the same font-size as Apple (10px), once setting the font-size to 12px.

Comment 6

[philippe (part-time)]

Attachment: test case to illutrate the positioning of the checkbox

Next to the checkbox, I've added a plain html span with the same properties as the box generated by the checkbox. The 'image' of the checkbox is indeed postioned slightly lower in Camino compared to Safari. (added the red border to illustrate the exact positioning of the objects).

The checkbox in Camino has a computed height of 15px (that is hardcoded in forms.css, line 612 in my copy). The box in Safari has a computed height of 12px.
The 'image' used by Camino is actually 12px tall.
If I change, in forms.css, the height for the input[type="checkbox"] to 12px (from 15px), then both browsers display the same -- in this particular testcase. I'll have to do further testing to determine the exact implications of this change on other uses (i.e. when the checkbox is na inline element, the default).

Comment 7

[philippe (part-time)]

Attachment: test case with reduced height on the checkbox

To illustrate the point in my previous comment, in this test, I changed the height of the checkbox, overriding the UA stylesheet (forms.css). The checkbox is aligned to the top as it is in Safari (version 2.03).

fwiw, I'll add that current versions of Safari do not allow resizing the height of the checkbox. I downloaded the latest version of WebKit and played around with various values. On those builds, the author can modify the height/width. Nightly Safari then resizes the 'image' to match the specified size.
(http://nightly.webkit.org/builds/)

Comment 8

[Chris Lawson (gone)]

This is a dupe of a really old layout bug.

cl

Comment 9

[Wayne Mery (:wsmwk)]

do you still see this with ?  WFM Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a3pre) Gecko/20070216 Minefield/3.0a3pre