Right alignment and vertical alignment with CSS checkbox / radio button

Question

I am very close and work in Safari, Firefox and IE8, however IE7 shortcuts and radio buttons are not aligned vertically.

My HTML:

<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:

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;
}

EDIT:
Based on the suggestion, check out the rest of my html and css. I updated the code above and now it definitely demonstrates the problem. If I take font-sizefrom #master-container, it is aligned, but then this is not the correct font size. I tried adding font-sizein ul.inputlist li input, but that didn't help. Any suggestions? Thanks for all your help!

Answer 1

This might be what you need:

label, input {vertical-align: baseline;}

. . IE7.

, !

Answer 2

"clear: both" li:

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