Ik ben bezig met een nieuwe site

Hier staat bovenaan een menu, in firefox ziet hij er uit zoals het hoort. Maar in IE 8 en IE 8 compatibiliteitsweergave werkt hij niet goed. Ik heb van alles zitten proberen maar kom er even niet uit.. Ziet iemand het?

Wat er dus moet gebeuren:
- In IE 8 moet de hover ook een hoger plaatje worden zoals in firefox
- In IE 8 compatibiliteitsweergave moet de link in het midden van de navigatiebalk komen.

De css:

.topnav{ DIT IS DE RODE NAVIGATIE BALK
background:url(../images/topnav.gif);
width:1000px;
height:44px;
float:left;
text-align:center;
}

.menu-top ul{
list-style:none;
}

.menu-top li{
display:inline;
}

.menu-top a, .menu-top a:visited{
font-size:16px;
color:#FFFFFF;
text-decoration:none;
padding-left:10px;
padding-right:10px;
}

.menu-top a:hover{
font-size:16px;
color:#FFFFFF;
text-decoration:none;
background:url(../images/topnav-hover.gif);
padding-left:10px;
padding-right:10px;
padding-top:12px;
padding-bottom:14px;
}

Ik hoop dat iemand het snel ziet!

Probeer de ul eens padding: 0; en margin: 0; mee te geven, of anders list-style-type: none;

had ik zelf ook al geprobeerd, werkt helaas niet..
Is joomla trouwens

Van Joomla heb ik weinig kennis. Ik kan je daarom niet verder helpen, sorry!

Das jammer:)

Heb begin post iets aangepast dat mensen misschien beter snappen wat er moet gebeuren.
Aanvullend bericht:
De website is een joomla site zoals ik eerder al zei, hierdoor wordt er bij de url uit een list span toegevoegd, zou ik hier wat mee kunnen misschien?

<ul class="menu-top"><li class="active item1"><a href="link"><span>Home</span></a></li></ul>