il mio menu si vede giusto con IE7 e sbagliato con FFOX

[Antares88]

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:

<div id="mm">
                <div id="leftcorner">
                    <div id="rightcorner">
                    <div id="menu">
                    <ul id="navlist">
                        <li id="active">
                        	<a href="#" id="current" class="menu">Ambiente</a></li>
                        <li><a href="#" class="menu">Cultura</a></li>
                        <li><a href="#" class="menu">Istruzione</a></li>
                        <li><a href="#" class="menu">Sanità</a></li>
                        <li><a href="#" class="menu">Sociale</a></li>
                        <li><a href="#" class="menu">Trasporti, viabilità, infrastrutture</a></li>
                    </ul>
                    </div>
                    </div>
                </div>
            </div>

CSS:

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 ?

E' come se in FFOX non mi prendesse quel margin-top: 3px; nel div menu...

[Antares88]

ho risolto impostando un line height