Last Comment Bug 210212 - CSS vertical-align puts input radio button too low
: CSS vertical-align puts input radio button too low
Status: NEW
: css1, testcase
Product: Core
Classification: Components
Component: Layout: Block and Inline (show other bugs)
: Trunk
: All All
: -- minor with 2 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Jet Villegas (:jet)
Depends on:
  Show dependency treegraph
Reported: 2003-06-21 10:46 PDT by Felipe
Modified: 2009-08-23 20:10 PDT (History)
2 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

code that illustrates layout quirk (500 bytes, text/html)
2003-06-21 10:48 PDT, Felipe
no flags Details
IE drawing the radio button (6.66 KB, image/png)
2003-06-21 10:51 PDT, Felipe
no flags Details

Description Felipe 2003-06-21 10:46:15 PDT
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 2003-06-21 10:48:54 PDT
Created attachment 126192 [details]
code that illustrates layout quirk
Comment 2 Felipe 2003-06-21 10:51:47 PDT
Created attachment 126193 [details]
IE drawing the radio button
Comment 3 Duncan Lilly 2003-08-01 05:36:09 PDT
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] 2003-08-07 07:11:36 PDT
Over to Browser
Comment 5 David Baron :dbaron: ⌚️UTC-10 2003-11-12 16:39:39 PST
Either Layout:Block&Inline or Layout:Form Controls, not DOM Style.
Comment 6 Boris Zbarsky [:bz] (still a bit busy) 2003-11-22 22:27:51 PST
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-10 2003-11-22 22:32:44 PST
It really doesn't look like we're aligning the midpoint of the radio button,
Comment 8 David Baron :dbaron: ⌚️UTC-10 2003-11-22 22:33:26 PST
(In other words, I think IE puts the radio button too high but we put it too low.)
Comment 9 Boris Zbarsky [:bz] (still a bit busy) 2003-11-23 00:28:56 PST
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-10 2003-11-23 00:35:05 PST
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 [:bz] (still a bit busy) 2003-11-23 00:54:49 PST
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) 2003-11-23 04:43:06 PST
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 [:bz] (still a bit busy) 2003-11-23 09:02:10 PST
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) 2003-11-23 09:10:01 PST
Just checking! :-) It wasn't completely clear from the earlier comments.
Comment 15 David Baron :dbaron: ⌚️UTC-10 2003-11-23 10:18:17 PST
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
Comment 16 Boris Zbarsky [:bz] (still a bit busy) 2003-11-23 11:30:42 PST
It's just putting the ascent equal to the height and the descent to 0.  See

Note You need to log in before you can comment on or make changes to this bug.