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.
Steps to Reproduce:
load the soon-to-be-attached document
radio button is too low
middle of radio button should have v-aligned with the middle of the text.
Created attachment 126192 [details]
code that illustrates layout quirk
Created attachment 126193 [details]
IE drawing the radio button
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
Over to Browser
Either Layout:Block&Inline or Layout:Form Controls, not DOM Style.
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