Right-Align and Vertical Align label with checkbox/radio button CSS

Question

Hi Everyone,

I'm very close and have this working in Safari, Firefox and IE8, however IE7 the labels and radio buttons do not align vertically.

My HTML is:

<div id="master-container">
    <fieldset id="test">
    <legend>This is a test of my CSS</legend>
         <ul class="inputlist">
             <li>
                 <label for="test1">Test 1</label>
                 <input name="test1" id="test1" type="checkbox" disabled="disabled"/>
             </li>
             <li>
                 <label for="test2">Test 2</label>
                 <input name="test2" id="test2" type="checkbox" disabled="disabled"/>
             </li>
         </ul>
    </fieldset>
</div>

My CSS Is:

html{font-family:Arial,Helvetica,sans-serif;}
#master-container{width:615px;font-size:12px;}

ul.inputlist{list-style-type:none;}
ul.inputlist li{width:100%;margin-bottom:5px;}
ul.inputlist li label{width:30px; text-align:right; 
                     margin-right:7px;float:left;}

Any suggestions? Thanks!

EDIT: Based on the suggestion to check the rest of my html and css. I updated the code above and now it accurately demonstrates the problem. If I take font-size out of #master-container it lines up but then it is not the proper font-size. I tried to add a font-size to ul.inputlist li input but that didn't help. Any suggestions? Thanks for your help everyone!

Answer 1

This could be what you needed:

label, input {vertical-align: baseline;}

Both element with the same property, will help. Also baseline works similar. middle works different in IE7.

Hope it helps!

Answer 2

What about adding "clear: both" to the li elements:

ul.inputlist li{width:100%;margin-bottom:5px;clear:both}