Ho realizzato un menù arrotondato per un sito, basato su 3 immagini di sfondo: l'estremità di sinistra, l'estremità di destra, e la parte centrale che si ripete orizzontalmente.

Il codice è questo:

HTML:
codice:
<div id="mm">
                <div id="leftcorner">
                    <div id="rightcorner">
                    <div id="menu">
                    <ul id="navlist">
                        <li id="active">
                        	Ambiente[*]Cultura[*]Istruzione[*]Sanità[*]Sociale[*]Trasporti, viabilità, infrastrutture[/list]
                    </div>
                    </div>
                </div>
            </div>
CSS:

codice:
div#leftcorner{
	background-image:url(../media/m_left.jpg);
	width:15px;
	height:27px;
}

div#rightcorner{
	background-image:url(../media/m_right.jpg);
	background-position: right;
	background-repeat:no-repeat;
	width:960px;
	height:27px;
}

div#mm{
	width:960px;
	background-image:url(../media/m_1px.jpg);
	height:27px;
}

#navlist li
{
	display: inline;
	list-style-type:none;
	padding-right: 70px;
}

div#menu{
margin-top: 3px;
}

Su Firefox però il testo dei link non esce centrato in altezza, ma leggermente spostato verso l'alto. SU IE7 invece viene visualizzato correttamente. Ecco gli screenshot per capire:


Menù su Firefox

Menù su IE7

Cosa c'è che non va, e come posso risolvere ? è come se in firefox non mi prendesse quel margin-top:3px; del div#menu...