bredde af knapper på liste

Jeg har en menu som ser således ud:

<ul id="menu">
<li><a href="?p=forside">Forside</a></li>
<li><a href="?p=nyheder">Nyheder</a></li>
<li><a href="?p=profil">Profil</a></li>
<li><a href="?p=cv">CV</a></li>
<li><a href="?p=ferniseringer">Ferniseringer</a></li>
<li><a href="?p=galleri">Galleri</a></li>
<li><a href="?p=presse">Presse</a></li>
<li><a href="?p=kontakt">Kontakt</a></li>
<li><a href="?p=links">Links</a></li>
</ul>

CSS:

ul#menu {
    width:100%;
    margin:0 0 10px 0;
    padding:0;
    list-style:none;
    float:left;
    background:#eee url("../img/menu_fade.gif") repeat-x;
    border-top:1px solid #eee;
    border-bottom:1px solid #ccc;
    text-align:center;
}

ul#menu li {
    display:inline;
    margin:0;
    padding:0;
}

ul#menu li a {
    float:left;
    width:40px;
    text-decoration:none;
    text-align:center;
    padding:30px 8px 2px;
    font:11px "Trebuchet MS", sans-serif;
    color:    #666;
    border-right:1px solid #fff;
}

ul#menu li a:hover {
    background:#ccc url("../img/menu_fade.gif") 0 -70px repeat-x;
    color:#900;
}

-------------

Som i kan se har jeg sat width til 40px så feks "CV" ikke er meget smal...men da "Ferniseringer" fylder mere en 40px går den ud over boksen i Firefox. Det virker fint i IE hvor boksen følger med og det er sådan jeg gerne vil have det i Firefox osse. Hvordan gør jeg sådan at menuerne er 40px lange eller længere hvis teksten kræver det?

/dave