[Solved] Menu under Firefox

Hi.

I am about to finish a basic css template for my site, before i go to the next step and make it a more better looking template, i'd like to fix the current problem which i don't like at all.

http://www.virtualmz.com/gamble/

You see the menu in IE? It's OK. In Opera it's ok too. But under Firefox is wrong, you can see the difference very easy.

What should i do?

Here you have the menu related css tags:

#menu { background-color : #8B4513; color : #FFFAFA; height : 25px; width : 900px; background-image : url("images/menu_bg.jpg"); background-repeat : repeat-x; }

#mainnav {
background-color : #B22222;
color : #FFFAFA;
width : 100%;
border : solid #FFDEAD;
border-width : 1px 0px 1px 0px;
}

#mainnav ul li {
background-color : #B22222;
color : #FFFAFA;
display : inline;
}

#mainnav ul {
background-color : #B22222;
color : #FFFAFA;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12px;
letter-spacing : 2px;
margin : 0;
padding : 0;
}

#mainnav ul li a {
background-color : #B22222;
color : #FFFAFA;
padding: 0.2em 8px;
text-decoration: none;
float: left;
border-right: 1px solid #FFDEAD;
}

#mainnav ul li a:hover {
background-color : #FF7F50;
color : #FFFAFA;
}

#mainnav ul li a:active {
background-color : #FFFFFF;
color : #010101;
}

Thank you in advance!