top property in CSS doesn't work with Internet Explorer 6

Question

I have some form with radio and checkboxes.

It should to be like this:

The CSS:

.span-al-top
{
    position:relative;
    top:-7px;

}

.span-al-bottom
{
    position:relative;
    top:2px;
}

HTML:

<label>Radio</label>
<br />
<input type="radio" name="radio" value="uno" class="radio-margin"><span class="span-al-bottom">uno</span>
<input type="radio" name="radio" value="due" class="radio-margin"><span class="span-al-bottom">due</span>
<input type="radio" name="radio" value="tres" class="radio-margin"><span class="span-al-bottom">tres</span>
<br />
<label>Checkbox</label>
 <br />
<input type="checkbox" name="vehicle" value="Bike" class="checkbox-margin"><span class="span-al-top">one</span>
<input type="checkbox" name="vehicle" value="Bike" class="checkbox-margin"><span class="span-al-top">two</span>
<input type="checkbox" name="vehicle" value="Bike" class="checkbox-margin"><span class="span-al-top">three</span><br />
<input type="checkbox" name="vehicle" value="Bike" class="checkbox-margin"><span class="span-al-top">four</span>
<input type="checkbox" name="vehicle" value="Bike" class="checkbox-margin"><span class="span-al-top">five</span>
<input type="checkbox" name="vehicle" value="Bike" class="checkbox-margin"><span class="span-al-top">six</span>

It works, but it doesn't work with Internet Explorer 6. In Explorer 6 I have this:

Any idea how I fix it?

Answer 1

Ok, I solved.. I just needed to add the code:

vertical-align: middle;

to both span styles.