Vertical alignment of labels next to checkbox in inline unordered list IE7

This fiddle aligns vertically in FFOX4, IE8 but the label text appears slighlty out of line in IE7.

http://jsfiddle.net/6hQ8e/1/

Is there any way to fix this other than with hacks/conditional CSS?

Check boxes have a "hard" margin in older IE. Give them margin: -3px in a style sheet specifically for IE < 8.

Remove this line from your CSS:

.selection label{padding:0; width:auto; vertical-align:bottom;}

And replace with the following CSS:

.selection label{float: none; padding:0; width:auto; vertical-align:middle;}
.selection input{float: none}