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

Posted by Jon on Stack Overflow See other posts from Stack Overflow or by Jon
Published on 2010-02-11T14:09:04Z Indexed on 2010/05/10 3:08 UTC
Read the original article Hit count: 483

Filed under:
|
|
|

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!

© Stack Overflow or respective owner

Related posts about html

Related posts about XHTML