HTML - aligning radio buttons and text

Question

Say you've got two simple table cells next to each other.
One contains a radio button and text. The other one contains just text.

The radio button's size is set to 16x16 pixels (don't ask me why, assume that it just is).
The font size is 12 pixels.

How do you make both labels and the radio button to line up consistently in all major browsers along (or reasonably close to) the vertical middle of the table row?

Sample HTML to get you started:

<style type="text/css">
td {
  font-size: 12px;
  font-family: Verdana;
}

.radio {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0px;
}

.blah {
  text-decoration: line-through;
}
</style>

<table>
  <tr>
    <td>
      <input type="radio" class="radio" />
      <span class="blah">O</span>
    </td>
    <td>
      <span class="blah">O</span>
    </td>
  </tr>
</table>

In my installed versions of IE, Opera, Firefox and Chrome, the above renders like this

The result I'm expecting to see is the one displayed on that image by... ...IE? Seriously?

The rest look close enough, but any attempts I made to line up the text made it always look awful in at least 2 of the 4 browsers.

Answer 1

One way to accomplish this would be to add a nested table to the first of your two cells, and put the radio button and first span in two cells (within the nested table)

<table> 
  <tr> 
    <td> 
      <table><tr><td><input type="radio" class="radio" /></td>
      <td><span class="blah">O</span></td></tr></table>
    </td> 
    <td> 
      <span class="blah">O</span> 
    </td> 
  </tr> 
</table> 

Answer 2

Quick shots in the dark:

• Give the radio input element it's own table cell? Then at least the text's should line up with each other.
• Put vertical-align:middle; to td instead of .radio? May still cause problems, because the baseline of the text in the cell with the radio input element may still be determined by the input element...

Answer 3

<td>
  <input type="radio" class="radio" />
</td>
<td>
  <span class="blah">O</span> <!-- text -->
</td>
<td>
  <span class="blah">O</span> <!-- text2 -->
</td>

Why don't you put the text in its own column.

Answer 4

A quick fix is to make the font-size:12px; of the td and width:16px;height:16px; of the radio equal.

2 examples:

td {
  font-size: 12px;
}
input[type=radio] {
  width: 12px; /* resize radio */
  height: 12px;
}

and

td {
  font-size: 16px; /* resize font-size */
}
input[type=radio] {
  width: 16px;
  height: 16px;
}

Answer 5

Googling "vertical-align:middle" found this short explanation by Gavin Kistner, which is useful. I tried out the final suggestion on that page, which seems to render repectably in Chrome, IE, Firefox, Opera, and Safari.

What I did was add td{ line-height:1.5em } - see the link for explanation.