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




Layout: Form Controls
16 years ago
9 years ago


(Reporter: Dave Myron, Unassigned)


({pp, testcase})

Windows XP
pp, testcase

Firefox Tracking Flags

(Not tracked)



(4 attachments)



16 years ago
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.

<input type="checkbox" name="test" value="test"> Test

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

16 years ago
Assignee: asa → form
Component: Browser-General → Layout: Form Controls
QA Contact: asa → desale
Is this Windows-only?  Looks ok in Linux....

Comment 3

16 years ago
It seems that it's only happening on some cases (and I've only tested on Windows

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

Maybe it's something to do with CSS?
Most likely an issue with alignment in vertically-centered table cells or
something (a minimal testcase would help here...)
Created attachment 114281 [details]
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.)
Keywords: testcase
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).
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

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

Comment 10

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

o i
o p
o dp
Created attachment 136194 [details]
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

15 years ago
Created attachment 136195 [details]
screenshot on windows

It gives something different on windows. I also just noted that this gets
slighlightly better at larger font-sizes.
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

15 years ago
Created attachment 136196 [details]
with font-size:25px

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

Comment 15

15 years ago
margin-top:0 has no apparent effect. (Other values, e.g., margin-top:10em have
some effects, so the margin code kicks in.)
So... I'm not too hot at this win32 api crap, but the code at
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

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

15 years ago
No quick fix. Confirming...
Ever confirmed: true
How about just breaking that up into two separate cases?  One for
checkbox/radio, one for the rest of that stuff...

Comment 20

15 years ago
It still causes weird effects.

We really need a separate non-layout component for all this nsITheme crud...
perhaps the platform Gfx components?   :(
Keywords: pp
Summary: Text next to radio buttons or checkboxes does not align correctly → Text next to radio buttons or checkboxes does not align correctly (native theme/theming)
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.



11 years ago
Duplicate of this bug: 390871
Assignee: layout.form-controls → nobody
QA Contact: desale → layout.form-controls
You need to log in before you can comment on or make changes to this bug.