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
Assignee: asa → form
Component: Browser-General → Layout: Form Controls
QA Contact: asa → desale
Is this Windows-only? Looks ok in Linux....
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.)
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?
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 them....
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...
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?
Created attachment 136196 [details] with font-size:25px This one is with font-size:25px. The previous one was with font-size:9pt
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 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?
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.
No quick fix. Confirming...
Status: UNCONFIRMED → NEW
Ever confirmed: true
How about just breaking that up into two separate cases? One for checkbox/radio, one for the rest of that stuff...
It still causes weird effects.
OK. We really need a separate non-layout component for all this nsITheme crud... perhaps the platform Gfx components? :(
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. Thanks.
11 years ago
Depends on: 402940
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.