Align radio button with corresponding label - asp.net

Question

I'm using ASP.NET radio button list control.
It generates the following HTML.
<table>
<tr>
<td>
<input type="radio"/>
<label >
label 1</label>
</td>
<td>
<input type="radio"
value="False" checked="checked" />
<label >
label 2</label></td>
</tr>
</table>
Everything looks fine so far(at least to the user), labels are aligned with radio buttons.
However when I resize the font to say 10px, the size of the label obviously looks smaller but the side-effect of that is that the label also looks like it is aligned to the bottom of a radio button. I need a label to be alligned to middle of a radio button.
I was able to do this in IE with the following css:
<style type="text/css">
label
{
font-size:10px;
line-height:12px;
vertical-align:middle;
}
</style>
However this doesn't work in Firefox or Chrome
Any suggestions?

Answer 1

Instead of this:
label {
font-size: 10px;
line-height: 12px;
vertical-align: middle;
}
try this:
label, input[type="radio"] {
font-size: 10px;
vertical-align: middle;
}

Answer 2

That attribute selector won't work in IE6 - the most painless method I've found is to add a class of 'radio' to your radio buttons, so the CSS becomes:
label, input.radio{
font-size:10px;
vertical-align:middle;
}
Of course, a table isn't the correct markup for that kind of form - personally I favour a definition list, with labels inside the DT and inputs in the DD. Semantically this is OK in my opinion - you're showing a list of terms (the labels) which the user needs to define (the inputs).
The markup would look like this:
<dl class="formStructure">
<dt class="radio"><label for="option1">Yes</label></dt>
<dd class="radio"><input type="radio" name="option" id="option1" value="yes"/></dd>
<dt class="radio"><label for="option2">No</label></dt>
<dd class="radio"><input type="radio" name="option" id="option2" value="no"/></dd>
</dl>