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.
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, though...
(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 way?
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