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 (http://img70.imageshack.us/img70/4831/mffoxrq8.jpg)

Menù su IE7 (http://img164.imageshack.us/img164/88/mie7lj1.jpg)

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 ;)