Radio buttons misaligned in IE7 and IE9

I have implemented two radio buttons within a table and they appear correctly in all versions of Chrome and Firefox but show incorrectly in IE7 and IE9, see below. The code i开发者_如何学Gos here. Thanks in advance!

It is happening because of the span besides the radio button and you have a bold text in the span. Try to set some negative margin-top to radio buttons it should work.

• use blueprintcss.org compatible with browsers/OS, 960.gs or similar CSS library
  users have already made it work with multiple browsers/platforms

• Very "raw" solution if nothing else works. Make tables for alignment.
  This is not a recommended approach though for standards compliance.

+-----------------------------+------------+
| +----+------------------+   |            |
| | o  | My halo complete |   | image here |
| +----+------------------+   |            |
+-----------------------------+------------+

• define CSS "td.middle { vertical-align: middle;}"
  then apply using tables

  <td class="middle">

• use custom rendering, if required