Compatibilité FireFox d'un menu deroulant

[comparef]

Bonjour,

J'essai de mettre en place un menu deroulant.
Celui-ci fonctionne mais il reste un probleme de compatibilité avec FireFox, c'est a dire que lorsque je le regarde avec IE, les sous menu d'ouvre bien a coté des menus principaux, mais avec FireFox les sous-menu s'ouvres SUR les menus principaux.
C'est donc un simple probleme de positionnement, mais etant donné que je ne suis pas tres calé en js et encors moins en compatibilité FireFox je ne trouve pas quoi modifier pour que cela fonctionne...

Voici une page test ou apparait ce menu :
http://www.wifeo.com/aaaaaaaaaaaaatest- ... oulant.php

Et Voici le script :

//CONFIG COULEUR ET APPARENCE
bgcolor='#FF9900';
bgcolor2='#CC0000';
document.write('<style type="text/css">');
document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:15; left:99px ')
document.write('#topgauche { position:absolute; z-index:10; }')
document.write('A:hover.ejsmenu {color:#000000; text-decoration:none;}')
document.write('.ejsmenu {color:#000000; text-decoration:none;}')
document.write('</style>')
document.write('<div style="position:relative;height:25"><DIV class=popper id=topdeck></DIV>');
/*
SCRIPT EDITE SUR L'EDITEUR JAVACSRIPT
http://www.editeurjavascript.com
*/

/*
LIENS
*/
zlien = new Array;
zlien[0] = new Array;
zlien[0][0] = '<A HREF="service-blog.html" CLASS=ejsmenu>News / Actualité</A>';
zlien[0][1] = '<a href="tests-dvd-du-week-end.php" CLASS=ejsmenu>Test dvd du week-end</A>';
zlien[0][2] = '<a href="tests-dvd-mad.php" CLASS=ejsmenu>Tests DVD MAD</A>';
zlien[0][3] = '<a href="archives-news.php" CLASS=ejsmenu>Archives News</A>';
zlien[0][4] = '<A HREF="service-index-alphabetique.html" CLASS=ejsmenu>Archives Test DVD</A>';
zlien[1] = new Array;
zlien[1][0] = '<a href="dvd-z2-belge.php" CLASS=ejsmenu>DVD Z2 belge</A>';
zlien[1][1] = '<a href="dvd-z2-asiatique.php" CLASS=ejsmenu>DVD Z2 Asiatique</A>';
zlien[1][2] = '<a href="dvd-z1.php" CLASS=ejsmenu>DVD Z1</A>';
zlien[1][3] = '<a href="umd-z2-belge.php" CLASS=ejsmenu>UMD Z2 belge</A>';
zlien[2] = new Array;
zlien[2][0] = '<a href="-la-guerre-blu-ray--hd-dvd-.php" CLASS=ejsmenu>La guerre Blu-Ray / HD-DVD</A>';
zlien[3] = new Array;
zlien[3][0] = '<a href="films-decryptes.php" CLASS=ejsmenu>Films d&eacute;crypt&eacute;s</A>';
zlien[4] = new Array;
zlien[4][0] = '<a href="zones--editions.php" CLASS=ejsmenu>Zones & Editions</A>';
zlien[4][1] = '<a href="types-de-sons.php" CLASS=ejsmenu>Types de sons</A>';
zlien[4][2] = '<a href="lexique.php" CLASS=ejsmenu>Lexique</A>';
zlien[4][3] = '<a href="sites-de-ventes.php" CLASS=ejsmenu>Sites de ventes</A>';
zlien[4][4] = '<a href="dvd-inedits-en-belgique.php" CLASS=ejsmenu>DVD In&eacute;dits en Belgique</A>';
zlien[4][5] = '<a href="dvd-officiels.php" CLASS=ejsmenu>DVD Officiels</A>';
zlien[4][6] = '<a href="belgo-editeurs--mode-demploi.php" CLASS=ejsmenu>Belgo-Editeurs : Mode d`emploi</A>';
zlien[4][7] = '<a href="belgo-collectors--la-gallerie.php" CLASS=ejsmenu>Belgo-Collectors : La gallerie</A>';
zlien[4][8] = '<a href="belgo-prevention--liste-des-problemes.php" CLASS=ejsmenu>Belgo-Prevention : Liste des probl&egrave;mes</A>';
zlien[4][9] = '<a href="collections-dvd.php" CLASS=ejsmenu>Collections DVD</A>';
zlien[5] = new Array;
zlien[5][0] = '<a href="les-grossistes-dvd.php" CLASS=ejsmenu>Les grossistes DVD</A>';
zlien[5][1] = '<a href="devenir-editeur-.php" CLASS=ejsmenu>Devenir &eacute;diteur ?</A>';
zlien[5][2] = '<a href="la-poste-et-ses-tarifs.php" CLASS=ejsmenu>La Poste et ses tarifs</A>';
zlien[5][3] = '<a href="comment-entretenir-ses-disques-.php" CLASS=ejsmenu>Comment entretenir ses disques ?</A>';
zlien[6] = new Array;
zlien[6][0] = '<A HREF="service-diaporama.html" CLASS=ejsmenu>Images Casino Royale</A>';
zlien[6][1] = '<a href="critique-cine.php" CLASS=ejsmenu>Critiques Cin&eacute;</A>';
zlien[7] = new Array;
zlien[7][0] = '<a href="redaction.php" CLASS=ejsmenu>La r&eacute;daction</A>';
zlien[7][1] = '<a href="plan-du-site.php" CLASS=ejsmenu>Plan du site</A>';
zlien[7][2] = '<a href="nos-partenaires.php" CLASS=ejsmenu>Nos Partenaires</A>';
zlien[7][3] = '<A HREF="service-newsletter.html" CLASS=ejsmenu>Newsletter</A>';
zlien[7][4] = '<A HREF="service-guestbook.html" CLASS=ejsmenu>Livre d`Or</A>';
zlien[7][5] = '<A HREF="service-contact.html" CLASS=ejsmenu>Contact</A>';

//POSITIONNEMENT DES MENU ET SOUS MENU (ENFIN JE CROIS)
if(document.getElementById)
{
skn = document.getElementById("topdeck").style
skn.left = 149;
}

function pop(msg,pos)
{
skn.visibility = "hidden";
a=true
skn.top = pos;
var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=150><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
pass = 0
while (pass < msg.length)
{
content += "<TR><TD BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\" HEIGHT=20><FONT SIZE=1 FACE=\"Verdana\">&nbsp;&nbsp;"+msg[pass]+"</FONT></TD></TR>";
pass++;
}
content += "</TABLE></TD></TR></TABLE>";
document.getElementById("topdeck").innerHTML = content;
skn.visibility = "visible";
}
function kill()
{
if(document.getElementById)
skn.visibility = "hidden";
}
document.onclick = kill;
if(document.getElementById)
{
document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=150 HEIGHT=60><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=60>')
document.write('<tr><TD WIDTH=150 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[0],0)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><div align="center"><strong><font color="#FF0000">Le petit rédacteur</font></strong></div></TD></tr>')
document.write('<tr><TD WIDTH=150 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[1],20)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><div align="center"><strong><font color="#FF0000">Plannings</font></strong></div></TD></tr>')
document.write('<tr><TD WIDTH=150 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[2],40)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><div align="center"><strong><font color="#FF0000">Nouveaux Supports</font></strong></div></TD></tr>')
document.write('<tr><TD WIDTH=150 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[3],60)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><div align="center"><strong><font color="#FF0000">Le film d&eacute;crypt&eacute;</font></strong></div></TD></tr>')
document.write('<tr><TD WIDTH=150 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[4],80)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><div align="center"><strong><font color="#FF0000">Dossiers</font></strong></div></TD></tr>')
document.write('<tr><TD WIDTH=150 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[5],100)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><div align="center"><strong><font color="#FF0000">Le monde du DVD, votre profession ?</font></strong></div></TD></tr>')
document.write('<tr><TD WIDTH=150 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[6],120)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><div align="center"><strong><font color="#FF0000">Cin&eacute;ma</font></strong></div></TD></tr>')
document.write('<tr><TD WIDTH=150 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[7],140)" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><div align="center"><strong><font color="#FF0000">Site</font></strong></div></TD></tr>')
document.write('</TABLE></TD></TR></TABLE></DIV>')
}
document.write('</div>');

Quelqu'un aurait-il une solution pour que cela marche aussi parfaitement avec FireFox ?

Merci d'avance pour vos reponses.

Robin

 

[u15391]

salut !
est ce que ce lien :

--http://css.alsacreations.com/modelesmenus/vd2.htm--

pourrait eventuellement t'aider ?

parce que ton probleme tient aux differences de gestion des marges entre firefox et IE.

Le lien que je te propose te permettra d'obtenir exactement ce que tu souhaites tout en allegant ton code et en evitant le javascript.

 

[spout]

Pour les listes tu peux aussi regarder ce site:
-http://css.maxdesign.com.au/listamatic/

 

[comparef]

ok, merci, je vais donc essayer d'adapter celui d'alsacreation a mes besoins.

A bientot.