Align radio button with corresponding label

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>