Posted by Jukka K. Korpela on 06/15/06 07:18

Cylix <cylix2000@gmail.com> scripsit:

> Toby Inkster wrote:
>> LABEL {
>> position: relative;
>> top: -3px; /* adjust as desired */
>> }

I wonder what was Toby's idea there. Trying to fix an assumed browser
deficiency in layout by suggesting a 3 pixels shift in some direction sounds
pretty desperate. On browsers that have an opposite deficiency or no
deficiency, you'd just make things worse.

> In my code, this CSS seems set the the whole radiobox group move
> upward,
> But not only the label ...

Well, apparently, if the <input> element is inside the <label> element, as
you have, which is quite correct. Toby apparently assumed a different
markup, like
<input type="radio" value="gold" checked id="gold"><label
for="gold">Gold</label>

> My HTML code:
> <label>
> <input type="radio" value="gold" checked>
> Gold</label>
> <label>
> <input type="radio" value="silver">
> Silver</label>

It's not a good idea to put several radio buttons on the same line. With
just two buttons, it might work, but in a long string like
( ) foo ( ) bar ( ) zap ( ) zip ( ) abc ( ) bcd ( ) cde ( ) ...
where ( ) denotes a radio button, people may make the mistake of checking
the button _after_ the item they wish to select. Never say that nobody is
stupid or careless enough to do so. We can't make anything foolproof
(because the fools are so clever), but at least we can try to exclude some
errors that will rather _easily_ be made by anyone when a little tired or in
haste.

So put them on separate lines, whatever markup you use for it (<div> is my
favorite).

The original problem of vertical alignment remains. The problem is that I do
not see the problem. On which browser do you see that "the label is not the
same level about the box horizontally"? Please post a sample URL, too. Maybe
it's something in the markup as a whole, or in the stylesheet.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Back to original message]