IE 6 and IE7 often display whitespace underneath images and <li> tags (when all other browsers do not) . The best way to solve this is to add either or both of the css rules:

display:inline-block;

display:block;

The alternative method is to remove all space between tags within your html document, however this makes the mark-up hard to read and edit!

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 140%;
font-family: Helvetica, sans-serif;

/* Combined into one shorthand rule */
font: italic small-caps bold 1em/140% Helvetica, sans-serif;

I used to battle with trying to line up labels horizontally with radio or checkboxes…. it never looked the same in all browsers.

Solution:

HTML:

<ul class=”form-check”>
<li><input name=”radio” type=”radio” value=”yes” /><label>Yes</label></li>
<li><input name=”radio” type=”radio” value=”no” /><label>No</label></li>
</ul>

CSS:

ul.form-check{
padding: 0;
margin: 0;
}

ul.form-check li{
display: block;
list-style: none;
clear: both;
float: none;
height: auto;
overflow: auto;
background:#f2ffe4;
}

ul.form-check li input{
display: block;
float: left;
}

ul.form-check li label{
display: block;
margin-left: 0.4em;
margin-top: 0.1em;
float: left;
clear: right;
font-size:0.9em;
}

If you would like the list inline:

<ul class=”form-check-inline”>
<li><input name=”checkbox” type=”checkbox” value=”" /><label>Option 1</label></li>
<li><input name=”checkbox” type=”checkbox” value=”" /><label>Option 2</label></li>
<li><input name=”checkbox” type=”checkbox” value=”" /><label>Option 3</label></li>

</ul>

ul.form-check-inline{
padding: 0;
margin: 0;
}

ul.form-check-inline li{
display: inline;
list-style: none;
float: none;
height: auto;
overflow: auto;
background:pink;
}

ul.form-check-inline li input{
display: block;
float: left;
}

ul.form-check-inline li label{
display: block;
margin:1px 10px 0 0;
float: left;
clear: right;
font-size:0.9em;
}

I have always had problems with the <hr/> and getting it to look equally spacedbut this seems to work well across all browsers.

hr{
color:#76a2d7;
background-color:#76a2d7;
height:1px;
border:none;
margin:0 0 10px 0;
}