[Help]I am having a problem with a CSS menu and Firefox

[ElysisOne]

Greetings, before start with my request i want to introduce myself. I am Harry, from Colombia and i have a blog site (i am not going to put the web address because i do not want to spam). My native language is spanish, so, please excuse my bad english!.

Now lets go to the point,

In my site i've created a CSS menu and it works perfectly... but i am having a problem. It seems i am getting a padding or margin problem with the top part of the menu container.

A image will be better.

Menu working fine with IE:

http://a.imageshack.us/img69/7204/iemenu.jpg

Menu working bad with FF and Google Chrome:

http://a.imageshack.us/img830/6043/firefoxerror.jpg


This is the CSS code of the menu:

/* The CSS Code for the menu starts here */
#menues {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
background: #333;
height: 30px !important;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-top: 2px solid #333;
border-left: 2px solid #333;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
}
#menues li {
list-style-type: none;
float: right;
margin:0;
margin-top: -11px;
border-left: 1px double #555;
}
#menues li a {
display:block;
line-height: 30px;
text-decoration: none;
padding: 0 20px;
color: #999;
}

#menues li a:hover {
background: #222 !important;
color: #FFF !important;
}
#menues li.active a {
color: #FFF !important;
}
#buscador {
display:block;
float:left;
margin-left:20px !important;
margin-top:3px;
}


And this is the way I putted it in my template:


<div id='menues'>
<span id='buscador'>
<form action='http://www.cuerpoarmonioso.com/p/resultados-de-la-busqueda.html' id='cse-search-box'>
<div>
<input name='cx' type='hidden' value='XXXXXXXXXXXXXXXXXXXXXXXXXXXXX'/>
<input name='cof' type='hidden' value='FORID:11'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input name='q' size='35' type='text'/>
<input name='sa' type='submit' value='Buscar'/>
</div>
</form>
<script src='http://www.google.com.co/cse/brand?form=cse-search-box&amp;lang=es' type='text/javascript'/></span>
<ul class='menues'>
<li><a href='http://www.cuerpoarmonioso.com/p/indice-del-sitio_25.html'>Mapa del Sitio</a></li>
<li><a href='http://www.cuerpoarmonioso.com/p/contactenos.html'>Contáctenos</a></li>
<li><a href='http://www.cuerpoarmonioso.com/p/acerca-de-este-sitio.html'>Acerca de</a></li>
<li class='active'><a href='http://www.cuerpoarmonioso.com'>Inicio</a></li>
</ul>
</div>

I know some HTML, CSS and PHP, but... i am not really into this =) If anybody can help me, i would be really pleased :nod: