210212 - CSS vertical-align puts input radio button too low

Status: NEW

(Core :: Layout: Block and Inline, defect)

Description

[Felipe]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.4b) Gecko/20030516 Mozilla Firebird/0.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.4b) Gecko/20030516 Mozilla Firebird/0.6

In the document that I'll attach, it appears that MF is v-align'ing the top of
the radio button rather than the middle.

I'll also attach a PNG of IE6 doing it correctly.

Reproducible: Always

Steps to Reproduce:
load the soon-to-be-attached document
Actual Results:  
radio button is too low

Expected Results:  
middle of radio button should have v-aligned with the middle of the text.

Comment 1

[Felipe]

Attachment: code that illustrates layout quirk

Comment 2

[Felipe]

Attachment: IE drawing the radio button

Comment 3

[Duncan Lilly]

Verified under WinXP using Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5a) Gecko/20030727 Mozilla Firebird/0.6.1

Comment 4

[Simon Paquet [:sipaq]]

Over to Browser

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Either Layout:Block&Inline or Layout:Form Controls, not DOM Style.

Comment 6

[Boris Zbarsky [:bzbarsky]]

Isn't this just a known bug in IE?  Vertical-align:middle means that the
midpoint of the box should be aligned with "the baseline of the parent box plus
half the x-height of the parent" per CSS2.  That's what Mozilla does, and that's
clearly NOT what IE does, looking at that screenshot.  This becomes absolutely
clear if a large font size is used (eg 200px).

I'm tempted to just mark this invalid...

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

It really doesn't look like we're aligning the midpoint of the radio button,
though...

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In other words, I think IE puts the radio button too high but we put it too low.)

Comment 9

[Boris Zbarsky [:bzbarsky]]

Erm... indeed, we are not (that part is not as obvious at large font sizes ;) ).
 Would that be because it has a margin-top of 3px and a margin-bottom of 0?  If
I change those to both be 0 we render it a little higher up.  Should margin be
having that effect on line layout?

That margin was added as part of the checkin for bug 91602, according to blame.
 The patches in that bug do NOT include any changes to forms.css, however...

I'd vote to just remove that top margin.  That does not change rendering of our
default (aligned to text-bottom) radios.

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

margin should have an effect for replaced elements, although "vertical midpoint
of" is a little vague.

removing the margin sounds good to me

Comment 11

[Boris Zbarsky [:bzbarsky]]

Hmm.. not quite so simple, actually... radio inputs do in fact use baseline
alignment, not text-bottom... So just removing the margin makes them be too high
up for normal-size text.

Comment 12

[Hixie (not reading bugmail)]

I really think we should just make this look good for us, and forget about what
IE does. There are many cases where what IE does with form controls is blatently
stupid and I _really_ think we don't need any more quirks.

Comment 13

[Boris Zbarsky [:bzbarsky]]

Ian, we _are_ talking about what's good for us and ignoring IE... ;)

Perhaps vertical-align:middle should simply ignore margins?  That would make the
most sense to me...

Comment 14

[Hixie (not reading bugmail)]

Just checking! :-) It wasn't completely clear from the earlier comments.

Comment 15

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

How does a top margin change the position of something that's baseline-aligned?
 Is the radio button code hard-coding the position of the baseline in some weird
way?

Comment 16

[Boris Zbarsky [:bzbarsky]]

It's just putting the ascent equal to the height and the descent to 0.  See
http://lxr.mozilla.org/seamonkey/source/layout/html/forms/src/nsFormControlFrame.cpp#470