CSS vertical-align puts input radio button too low




Layout: Block and Inline
14 years ago
8 years ago


(Reporter: Felipe, Unassigned)


({css1, testcase})

css1, testcase

Firefox Tracking Flags

(Not tracked)



(2 attachments)



14 years ago
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

14 years ago
Created attachment 126192 [details]
code that illustrates layout quirk

Comment 2

14 years ago
Created attachment 126193 [details]
IE drawing the radio button

Comment 3

14 years ago
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

14 years ago
Over to Browser
Assignee: blake → dom_bugs
Severity: normal → minor
Component: General → DOM Style
Product: Firebird → Browser
QA Contact: asa → ian
Version: unspecified → Trunk
Either Layout:Block&Inline or Layout:Form Controls, not DOM Style.
Assignee: general → block-and-inline
Component: DOM Style → Layout: Block & Inline
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...
It really doesn't look like we're aligning the midpoint of the radio button,
(In other words, I think IE puts the radio button too high but we put it too low.)
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.
margin should have an effect for replaced elements, although "vertical midpoint
of" is a little vague.

removing the margin sounds good to me
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.
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.
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...
Just checking! :-) It wasn't completely clear from the earlier comments.
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
It's just putting the ascent equal to the height and the descent to 0.  See


14 years ago
Ever confirmed: true
Keywords: css1, testcase
OS: Windows 2000 → All
Hardware: PC → All
Assignee: layout.block-and-inline → nobody
QA Contact: ian → layout.block-and-inline
You need to log in before you can comment on or make changes to this bug.