distanza tra header e menu

[guinness86]

Ciao a tutti, sto realizzando un sito web con wordpress..
Dopo aver impostato tutta la grafica sto effettuando i test sui vari browser per controllarne la compatibilità.
Mi sono trovato davanti a questo problema:


Uploaded with ImageShack.us

In pratica:
Ho il blocco hd (quello con il banner di sopra) e il blocco menu (con i pulsanti) che su Safari e Chrome riesco a vedere correttamente uniti tra loro...
Le immagini di sfondo dell'header e del menu sono continuative...solo che su Firefox c'è la distanza che si vede nell'immagine.
Vi mostro il css:

#hd{
	text-align: left;
	padding-top: 20px;
	padding-left: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
	height: 160px;
	width: 980px;

	background-image: url(images/banner.png);
        margin-top: 0px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
}

Questo è il codice dell'header.

#menu {padding:0; border:0px solid #fff }
#menu ul {list-style:none; margin:0; padding:0; font-size:85%; }
#menu ul li { padding:0; margin:0; border-bottom:1px solid #FFFFFF; }
#menu ul li a { display:block; padding:4px 4px 4px 10px; text-decoration:none; color: #FFFFFF; }
#menu ul li a:hover { color:myheadttcolor; background: #0099DD; }


li .categories, li .linkcat, li .pagenav {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.yui-nav{
padding-left: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-top: 0px;
text-align:center;
background-color: #670001;
height: 40px;
background-image: url(images/menu.png);
}

.yui-navset .yui-nav a:hover {
	background-color: #fff;
	color: #670001;
	border: 1pt solid #670001;
	

    
}

.yui-navset .yui-nav li a {
    background-color: #670001;
	border: 1pt solid #fff;
	background-repeat: repeat;
	color: #FFFFFF;
/*	padding: .3em .7em .3em .7em;*/
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 0px;
	padding-right: 0px;
	text-decoration:none;
	font-size: 80%;
	font-weight: bold;
	height: 15px;
	width: 100px;
	margin-right: 0;
	margin-left: 0px;
	margin-top: 5px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	
}

Questo il codice del menu...

Non riesco a venire a capo del problema...qualche consiglio?!?!
Grazie mille!!

[ldetomi]

Prima di tutto, riduci il tuo codice al massimo, prepara una versione iper semplificata del tuo layout (al limite con solo header e un pulsante), insomma... il minimo codice necessario che riproduce il tuo problema. Poi posta un link funzionante a tale pagina, così possiamo provare in tempo reale (sarebbe anche utile uno screenshot di quello che invece vorresti) e poi vediamo come aiutarti!!!!