Pb compatibilité IE 6 et 7 / Firefox

Bonjour.

Je travaille sur un site depuis peu et je galère car je ne trouve pas ce qui pourrait causer le problème de compatibilité de menu déroulant que j'ai sous IE 6 et 7.
Tout passe nickel sous FireFox.

Adresse du site : http://www.faraway.yurx.com/red

Mon menu est inspiré du site : http://www.htmldog.com/articles/suckerfish/dropdowns

Voici mon CSS le menu de la page...

#nav ul {
	margin: 0;
	list-style: none;
	padding: 0px 0px 0px 3px;
	background: #EFEFEF;
	border: solid 1px #999999;
}

#nav {
	margin: 0;
	list-style: none;
	padding: 0px 0px 0px 30px;
}

#nav a {
	padding: 0px;
	margin-bottom: 0px;
}

#nav li {
	float: left;
	padding: 0px;
	margin-top: 3px;
	margin-right: 20px;
	margin-bottom: 3px;
}

#nav li ul {
	position: absolute;
	left: -999em;
	width: 100px;
}

#nav li:hover ul {
	left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}
#nav li ul li {float: none;}

Pourriez-vous m'aider à trouver le problème?
Les sous-menus s'affichent à gauche des liens sous IE et il est très difficile de les cliquer.

Merci d'avance,
j-s
Modifié par j-s (15 Apr 2007 - 21:38)

Ok, je me réponds à moi-même...

J'ai repris le menu d'origine et ça semble mieux passer.

Mais là j'ai un autre problème, les liens de la barre de menu son tous mal espacés... Comment faire pour remettre de l'ordre dans ceux-ci?

Adesse du site : http://www.faraway.yurx.com/red

Mon code CSS :

#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#nav a {
	display: block;
	width: 100px;
}

#nav li {
	float: left;
	width: 80px;
}

#nav li ul {
	position: absolute;
	width: 100px;
	left: -999em;
	background-color: #EFEFEF;
	padding: 3px;
	border: 1px solid #999999;
}

#nav li:hover ul {
	left: auto;
}

EDIT : On dirait qu'il y a encore des problèmes de compatibilité... Des idées à propos de ce qui pourrait causer ça?

Merci encore une fois d'avance,
j-s
Modifié par j-s (15 Apr 2007 - 22:19)