accessible CSS menus in IE

    Well, the idea is to create a cross-browser accessible menu using CSS and <ul>.

I've managed to achieve it but only in FF and Opera, in IE
 the buttons don't render quite well, in my best effort only one of the button background images was not properly positioned ( lol ).

the result is something like this:




1st button is the over state.


                <ul id="SiteMainMenu">
                    <li class="CommonButton"><a href="#"><span>Como e Onde Fazer</span></a></li>
                    <li class="CommonButton"><a href="#"><span>Servi&ccedil;os</span></a></li>
                    <li class="CommonButton"><a href="#"><span>Not&iacute;cias</span></a></li>
                    <li class="CommonButton"><a href="#"><span>Dossiers</span></a></li>
                    <li class="CommonButton"><a href="#"><span>Perguntas Frequentes</span></a></li>
                    <li class="CommonButton"><a href="#"><span>Contactos &Uacute;teis</span></a></li>
                    <li class="SpecialButton"><a href="#"><span>&Aacute;rea Reservada</span></a></li>
                </ul>

#SiteMainMenu li.CommonButton a {
    background-image: url(images/buttons/common/normal/left.gif);
    background-repeat: no-repeat;
    background-position: left center;
    background-color: #a7d93b;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #006600;
    text-decoration: none;
    padding-left: 8px;
    padding-top: 3px;
    padding-bottom: 2px;
}
#SiteMainMenu li.CommonButton a:hover {
    background-image: url(images/buttons/common/over/left.gif);
    background-repeat: no-repeat;
    background-position: left center;
    background-color: #d7ebac;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #2e68b2;
    text-decoration: none;
}
#SiteMainMenu li.CommonButton a span {
    background-image: url(images/buttons/common/normal/right.gif);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 8px;
    padding-top: 3px;
    padding-bottom: 2px;
}
#SiteMainMenu li.CommonButton a:hover span {
    background-image: url(images/buttons/common/over/right.gif);
    background-repeat: no-repeat;
    background-position: right center;
}

That's not the final html/css, and i've tried various methods, changing diaplay modes setting height and width define the padding of every elements negative positioning of the span BG, but as i said, the span BG image remained incorrectly positioned.

can anyone help?