3

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

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!

jnthnjns
  • 8,894
  • 4
  • 39
  • 65
Jon
  • 5,678
  • 9
  • 35
  • 40

2 Answers2

2

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!

Allan Kimmer Jensen
  • 4,114
  • 1
  • 29
  • 50
  • Hi Allan, thanks for the suggestion, but unfortunately it didn't work. Any other ideas? – Jon Feb 11 '10 at 15:19
  • I found this: http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers i hope it can help you! – Allan Kimmer Jensen Feb 12 '10 at 12:25
  • 1
    Hi Allan, I had to take out a *{margin:0px;padding:0px;} I had, give the ul.inputlist li a line-height of 18px and then use vertical-align:baseline on the label. Thanks!!!!!!!!! – Jon Feb 12 '10 at 15:32
0

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

ul.inputlist li{width:100%;margin-bottom:5px;clear:both}
attack
  • 1,473
  • 12
  • 17
  • Thanks for the suggestion, but this didn't work either. Any other ideas? – Jon Feb 11 '10 at 20:51
  • When I tested the markup/CSS above, it doesn't work for me in Firefox (but it does in IE7), so I feel like there must be something else going on. Is there more markup/CSS? Another possible solution is to add more to margin-bottom, say 20px or so. – attack Feb 12 '10 at 02:14
  • I added the code that is causing the problem. Thanks for your suggestion! – Jon Feb 12 '10 at 13:19