XHTML 1.0 Strict & IE 6.0 Imaging problem

[desbotar]

Hi

I am making a website which has to be FF, Opera, Safari and IE 6.0 & 7.0 compatible. Also, it has to be XHTML 1.0 Strict validated and CSS 2.0 Validated.

Anyway, in Opera and FF, the website looks +- the same, but IE 6.0 is like always causing problems...

When I open my website (http://rsdweb.awardspace.com/), the top menu links (news, bio, gigs, etc) are displayed in some sort of descending manner in IE 6.0. The other browsers manage to display it correctly.

What can I do to make internet explorer show all these buttons (images) on a same level?

Thanks

ps Please excuse my attempt to express myself in english :x it's not my native language

[Wickham]

This works but I think there should be a better cure:-

<ul id="nav">
<li><a href="#" id="anews"></a></li>
<li style="margin-top: -2px;"><a href="#"
id="abio"></a></li>
<li style="margin-top: -2px;"><a href="#"
id="agigs"></a></li>
<li style="margin-top: -2px;"><a href="#"
id="apics"></a></li>
<li style="margin-top: -2px;"><a href="#"
id="alinks"></a></li>
<li style="margin-top: -2px;"><a href="#" id="acontact"></a></li>
</ul>

Notice that the first li tag for anews does not have the margin style. Firefox is unaffected but in IE7 it raises the second to last images up in line with the first.