PDA

View Full Version : CSS Alignment of radiobuttons and their labels



ruffy
Sep 23rd, 2009, 09:42 PM
I don't know how to get my radiobuttons, defined as,

<div id="options">
<fieldset id="fset">
<legend>Pick car</legend>
<label for="id_gm">
<input type="radio" value="gm" id="id_gm">gm</label>
<label for="id_vw">
<input type="radio" value="vw" id="id_vw">vw</label>
</fieldset>
</div>lined up so they are:
Floated to the left;
Each choice (radiobutton and its label) on its own row;
With the radiobutton prior to its label; and
With the radiobutton and its label aligned horizontally.

Would be grateful for your help.

Scriptet
Sep 23rd, 2009, 09:52 PM
You should keep the label outside of the radio button. So you're markup should be [email protected]



<div id="options">
<fieldset id="fset">
<legend>Pick car</legend>
<label for="id_gm">gm</label>
<input type="radio" value="gm" id="id_gm">
<label for="id_vw">vw</label>
<input type="radio" value="vw" id="id_vw">
</fieldset>
</div>


But you want the radio button before the label, so we switch them around. So the markup is now like:



<div id="options">
<fieldset id="fset">
<legend>Pick car</legend>
<input type="radio" value="gm" id="id_gm">
<label for="id_gm">gm</label>
<input type="radio" value="vw" id="id_vw">
<label for="id_vw">vw</label>
</fieldset>
</div>


Now you want them on their own row you can do this in a variety of ways. 2 ways I can think of straight away

1. Add a Line-Break <br> After each of the inputs.
2. Set the labels to display block, and the inputs to float left. Like:



#options form label { display: block; }
#options form input { clear:both; float:left; margin-right:20px; }


1 requires extra HTML markup, 2 requires a bit of CSS tweaking.

ruffy
Sep 24th, 2009, 07:44 PM
There's one little problem therein:

The radiobutton and its corresponding label
do not line up exactly horizontally. The label
appears a touch lower than the button it's
related to.

See the attachment to see what I mean.

jolly_nikki
Sep 24th, 2009, 08:18 PM
You can use CSS property margin-top for the label tag. Assign some negative value, something like

margin-top: -4px;

Scriptet
Sep 24th, 2009, 08:42 PM
Or give the input button a height, and then the label a line-height of the same value, should work, oh you would need to reset the default margin and padding applied to the input button aswell.

But as suggested above you could just niggle around with a negative margin or something to get it where you want.

Avril
Sep 25th, 2009, 11:57 AM
Looks fine on Safari... lower on FireFox and good ol' Netscape.. higher in Opera... (on a Mac). Seems like each browser shows it differently.