title: HTML - aligning radio buttons and text
body: <p>Say you've got two simple table cells next to each other.<br>
  One contains a radio button and text. The other one contains just text.</p>
  
  <p>The radio button's size is set to 16x16 pixels (don't ask me why, assume that it just is).<br>
  The font size is 12 pixels.</p>
  
  <p>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?</p>
  
  <p>Sample HTML to get you started:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  td {
    font-size: 12px;
    font-family: Verdana;
  }
  
  .radio {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: 0px;
  }
  
  .blah {
    text-decoration: line-through;
  }
  &lt;/style&gt;
  
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;input type="radio" class="radio" /&gt;
        &lt;span class="blah"&gt;O&lt;/span&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;span class="blah"&gt;O&lt;/span&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>In my installed versions of IE, Opera, Firefox and Chrome, the above renders like <a href="https://dl.dropbox.com/u/3110371/work/aligntest.png" rel="nofollow noreferrer">this</a></p>
  
  <p>The result I'm expecting to see is the one displayed on that image by...  ...IE? Seriously?</p>
  
  <p>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.</p>