semantic code for radio buttons help.

Hi,

I have a 'column' of radio buttons but , as I have coded it, they don't align with each other on the vertical because they position themselves according to where their descriptive word ends.

like this


<td class='rightTd'>
<input type='hidden' name="file_sequence_1" value="1" />
<p>Text: <input type="radio" class='radio_button' name="text_or_list_1" checked='checked' value="text" /></p>
<p>List: <input type="radio" class='radio_button' name="text_or_list_1" value="list" /></p>
</td>



Tempted to put them into a table to lay them out better, I suspect that would be 'wrong'. How would you do it? <dl>, <ul> or does it really matter? It is only for use in a cms where a desktop or laptop would be used to view the pages - if that makes a difference, to your answer.

bazz

<label>Text: <input type="radio" class='radio_button' name="text_or_list_1" checked='checked' value="text" /></label>
<label>List: <input type="radio" class='radio_button' name="text_or_list_1" value="list" /></label>
and then specifically set display:block; to these labels.

Thanks Abduraooft.

However, that only makes the display the same as when I used the <p> tags.

I am trying to make the radio buttons align vertically with each other. here's am image, if I can work out how to publish it ;)


bazz

I am trying to make the radio buttons align vertically with each other.

Then change the markup to this:

<label for="radio1">Text:</label> <input type="radio" id="radio1" class='radio_button' name="text_or_list_1" checked='checked' value="text" />
<label for="radio2">List:</label> <input type="radio" id="radio2" class='radio_button' name="text_or_list_1" value="list" />


And float the labels to the left (don’t forget to clear) and apply the same width to both of ’em.

Something like:

<label>Text: </label><input type="radio" class='radio_button' name="text_or_list_1" checked='checked' value="text" />
<label>List: </label><input type="radio" class='radio_button' name="text_or_list_1" value="list" />

with

label{float:left;clear:left;width:100px}
input{float:left}

would work.

EDIT: Ha, too slow....

Thanks all of you. workin' a treat now.:thumbsup:

bazz