Lining up radio buttons

[NeoDreamer]

By default, radio buttons line up to their corresponding labels. But if you wanted to space the radio buttons apart more by specifying some margins, then they don't line up anymore.


.form input[type="radio"] {
margin: 0 0.2em 1em 0;
}

.form label {
font-size: 1.2em;
font-weight: bold;
text-transform: capitalize;
}



<form class="form">

<h3>Type</h3>

<input name="article" type="radio" />
<label for="article" lang="choose">article</label>
<br />

<input name="video" type="radio" />
<label for="video" lang="choose">video</label>
<br />

<input name="picture" type="radio" />
<label for="picture" lang="choose">picture</label>


It looks like this:

http://img84.imageshack.us/img84/3260/radqe6.gif (http://imageshack.us)

Any ideas on how to get them lined up?

[fasterthanlight™]

Tables.

Thats how I do forms, allllll the time.

[NeoDreamer]

OMG. I havn't used tables in 5 years. I'm scared. :cantlook:

Alright, I'll try.

Also, do you know how get it so that when you click the radio's label the radio button gets checked?

[redelite]

Tables.

Thats how I do forms, allllll the time.

+1

I use to do it all the time with CSS and struggled getting this and that to match up. Finally, I said heck with it, and now I use tables. :bounce:

[fasterthanlight™]

OMG. I havn't used tables in 5 years. I'm scared. :cantlook:

Alright, I'll try.

Also, do you know how get it so that when you click the radio's label the radio button gets checked?


as long as your <label for=""> is correct, thats what does it




Re: tables,

as long as you use them properly, and use <th> for your labels, and <td> for your inputs (that way you can style them separately with CSS) then tables make your life soooooo easy..

also, valign="" is SO handy, because valign doesnt work on anything but tables (... I think)

[djheru]

You need to set the margin on the labels as well. I am hardcore against using tables for layout. I am a strict believer that tables should only be used to display tabular data, but I define forms as tabular data
:angel:

That being said, I think that it is still important to use proper css even to lay out your tables, and to stay away from deprecated attributes.

I think that IE 6 doesn't recognize the selector attribute also. I just use classes to define the different <input /> types.

[NeoDreamer]

Why doesn't padding work on TD's?


.form table tr td {
padding: 0 0.4 0.6em 0;
vertical-align: top;
}

When I verfiy with Firebug, it does not list padding and also I do not visually see any padding.

I also could not put padding on LABEL's. However, this time, padding shows up in Firebug but the padding runs past the TD's border, so in effect, there is no padding at all.

[fasterthanlight™]

does vertical-align show up in firebug?

The only problem i can think of is if you aren't doing your .form table tr td { correctly

and what djheru said is so true, about giving each input a class... its the only bomb proof way to individually (or in groups because its a class) apply styles to your inputs.

[NeoDreamer]

Yes, vertical align can be applied to TD.
Padding on TD does not show up in Firebug and also I personally do not see it
Margin could not be applied to TD either.




.form table tr td {
padding: 0 0.4 0.6em 0;
vertical-align: top;
}




<form class="form" method="post" action="<?php $_SESSION['PHP_SELF'] ?>">
<table>
<tr>
<td>
<label for="title">title:</label>
</td>
<td>
<input name="title" type="text" maxlength="100" size="100" />
</td>
</tr>
<tr>
<td>
<label for="description">description:</label>
</td>
<td>
<textarea name="description"></textarea>
</td>
</tr>
</table>
</form>

[fasterthanlight™]

That wasn't my question,

I need to know if your vertical align is actually working, if it also doesn't show up in firebug the way the padding isn't, then that is good to know.

Nit picking: change your .form class name to something more descriptive.

*EDIT: Oh, by the way, you have 0.4 with no "em" in your padding. fix it, and your problem will disappear

[NeoDreamer]

Yes, the typo was the error.

Vertical align is actually working.

Now, I need to figure out how to get LABEL's margin and/or padding to not cross over the TD border, so that margin/padding actually does something effective.



.form label {
font-size: 1.2em;
text-transform: capitalize;
padding: 0.6em 0 0 0;
}

[fasterthanlight™]

.form label {
display: block;
}

[NeoDreamer]

I can't make LABEL's blocks because then the LABEL's for radio buttons would not be on the same line as the radio button.

Edit:

On second thought, the LABEL's in in TH's should never be paired with a radio button, so I'll target those.

[fasterthanlight™]

you can if you define a width for your labels