192896 - Text next to radio buttons or checkboxes does not align correctly (native theme/theming)

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[Dave Myron]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.3b) Gecko/20030210
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.3b) Gecko/20030210

Text next to a radio button or checkbox is shifted downwards by several pixels
and looks just goofy.

Example:
<code>
<input type="checkbox" name="test" value="test"> Test
</code>

Output:
Text box that is about 4 pixels higher than where it should be aligned.

No amount of text-aligning changes the position.

Reproducible: Always

Steps to Reproduce:
Create a checkbox form field in HTML
Add some text next to it
View the page

Actual Results:  
Shifted checkbox or radio button

Expected Results:  
Properly aligned checkbox or radio button

Comment 1

[Chris Lyon]

->Layout

Comment 2

[Boris Zbarsky [:bzbarsky]]

Is this Windows-only?  Looks ok in Linux....

Comment 3

[Dave Myron]

It seems that it's only happening on some cases (and I've only tested on Windows
XP).

For instance, the radio buttons below this comment textfield are aligned
properly, but the radio buttons and checkbox at the bottom of
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20276020.html are
mis-aligned. 

Maybe it's something to do with CSS?

Comment 4

[Boris Zbarsky [:bzbarsky]]

Most likely an issue with alignment in vertically-centered table cells or
something (a minimal testcase would help here...)

Comment 5

[Christopher Hoess (gone)]

Attachment: Minimal testcase

This doesn't appear to be limited to table cells; maybe it's just a "feature"
of how we lay out these inputs? (I can see this now on the "Create New
Attachment" page, for instance.)

Comment 6

[Boris Zbarsky [:bzbarsky]]

The inputs are lined up with the bottom of the text (bottom of input at
text-bottom).  If you make the text tiny like in that testcase, that will of
course look odd (since the input will be taller than the text).

Comment 7

[Boris Zbarsky [:bzbarsky]]

I was thinking about this....  We could put the baseline exactly in the middle
of the radio/checkbox and then vertical-align it 50%.  That would give us more
"IE-like" rendering in the typical case (align the exact center of the
radio/checkbox will line up with the middle of the line box).  That will make
checkboxes/radios styled with "vertical-align: baseline" look even worse than
they already do.

I don't really see any other way to get the alignment IE does and still somewhat
claim to be implementing CSS, though... am I missing something?

Comment 8

[rbs]

IE behavior is sliglight improved, but still not quite elegant either.

A nicer alternative might be to put the bottom edge of the radio exactly on the
baseline, as if it was rolling on the baseline. Same for checkbox, BTW.
That is, by default, the ascent of the radio (resp. checkbox) could be the
raduis (resp. height), and the descent is zero. Thus looking like:

o i
o p
o dp

Comment 9

[Boris Zbarsky [:bzbarsky]]

That's actually what we do (assuming you meant diameter, not radius), for radio
buttons.  For checkboxes, we could do it, if we removed the bottom margin on
them....

Comment 10

[rbs]

Yep, I meant diameter. So, why doesn't it look thus?

o i
o p
o dp

Comment 11

[Boris Zbarsky [:bzbarsky]]

Attachment: xmag screenshot of testcase -- no styles on inputs

This is, again, on Linux.  Note that this renders exactly like rbs would like
it to render.  Does Windows render something different?  If so, that's probably
a bug in the Windows nsITheme code...

Comment 12

[rbs]

Attachment: screenshot on windows

It gives something different on windows. I also just noted that this gets
slighlightly better at larger font-sizes.

Comment 13

[Boris Zbarsky [:bzbarsky]]

Yeah, definitely looks like an nsITheme issue...  I wonder... does setting the
margin-top to 0 on "input" drop the nsITheme theming?  If not, does it affect
the rendering?

Comment 14

[rbs]

Attachment: with font-size:25px

This one is with font-size:25px. The previous one was with font-size:9pt

Comment 15

[rbs]

margin-top:0 has no apparent effect. (Other values, e.g., margin-top:10em have
some effects, so the margin code kicks in.)

Comment 16

[Boris Zbarsky [:bzbarsky]]

So... I'm not too hot at this win32 api crap, but the code at
http://lxr.mozilla.org/seamonkey/source/gfx/src/windows/nsNativeThemeWin.cpp#1707
seems to be somewhat problematic to me... That will force alignment of the top
of the widget with the top of the line, no?

Comment 17

[rbs]

I tried changing to TA_BASELINE, but this caused the downarrow (inside the
dropdown checkbox, e.g., on the URL bar, or on the slider) to appear at
unexpected places.

Comment 18

[rbs]

No quick fix. Confirming...

Comment 19

[Boris Zbarsky [:bzbarsky]]

How about just breaking that up into two separate cases?  One for
checkbox/radio, one for the rest of that stuff...

Comment 20

[rbs]

It still causes weird effects.

Comment 21

[Boris Zbarsky [:bzbarsky]]

OK.

We really need a separate non-layout component for all this nsITheme crud...
perhaps the platform Gfx components?   :(

Comment 22

[u279076]

I just filed a bug on a similar issue with Litmus, but I thought it might be site specific.  Could someone please investigate this further and close bug 390871 if it is indeed a dupe of this one?  I am not experienced enough to know how to investigate this.

Thanks.