Problème de CSS/javascript et Firefox

Bonjour, je suis un nouveau

J'avais tenté de faire un menu déroulant via css/javascript, et voilà ce que ça avait donné:
http://www.herakles.ca/temp/

On peut voir que sous firefox, dès que le curseur arrive au niveau du div central, le div du menu déroulant disparaît, comme si le OnMouseOut était considéré comme vrai ..

Du coup, j'ai changé de manière de faire le menu déroulant, pour éviter le bug foireux que j'avais sous firefox, mais je me retrouve avec 2 autre bugs bizarres qui n'apparaissent que sous firefox..

http://www.herakles.ca/temp2/

allez sur Services par exemple: là le menu s'affiche à droite, sortez le curseur et le menu reste (?), remetez le curseur sur le menu apparu et ressortez-le: hop il disparaît bien.
--> pourquoi ne disparaît-il pas la première fois qu'il y a un mouseout mais bien la deuxième fois ?

allez sur Partenaires: même cas mais avec des liens au lieu de texte ou image: le menu "clignote" (disparaît/apparaît) et des fois disparaît purement et simplement, comme si sortir des liens était considéré comme sortir du div o_O

----

Maintenant, autre bug bizarre, mais sous IE (et un peu sous Konqueror o_O): en allant sur Tarifs ou Contact (juste sur Tarifs pour Konqueror), le menu de Partenaires apparaît, et je ne vois AUCUNE raison pour qu'il apparaisse o_O

-----

Le menu:

<div class="menu">
    <? /* Cadre */ ?>
    <script type="text/javascript">
        window.onload=montre;
        function montre(id) {
            var d = document.getElementById(id);
            for (var i = 1; i<=10; i++) {
                if (document.getElementById('smenu'+i)) {
                    document.getElementById('smenu'+i).style.display='none';
                }
            }
            if (d) {
                d.style.display='block';
            }
        }
    </script>
    <img src="images/herakles_08.gif" width="30" height="233" alt="" class="cadreg" />
    <img src="images/herakles_10.gif" width="30" height="233" alt="" class="cadred" />
    <img src="images/herakles_07.gif" width="180" height="18" alt="" class="cadret" />
    
    <? /* Menu */ ?>
        <a href="index.php"><img src="images/herakles_12.jpg" alt="" border="0" class="accueil" /></a>
        
        <? /* Herakles */ ?>
        <dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
            <a href="herakles.php"><img src="images/herakles_16.jpg" alt="" border="0" class="herakles" /></a>
        </dt>
        
        
        <? /* Services */ ?>
        <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
            <img src="images/herakles_09.jpg" alt="" border="0" class="services" />
        </dt>
        <div id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
            Sous-Menu 1.1<br />
            Sous-Menu 1.2<br />
            Sous-Menu 1.3<br />
            <img src="images/herakles_09.jpg" alt="" border="0" />
        </div>
        
        <? /* Partenaires */ ?>
        <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
            <img src="images/herakles_14.jpg" alt="" border="0" class="partenaire" />
        </dt>
        <div id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
            <a href="#" class="listmenu">Sous-Menu 1.1</a><br />
            <a href="#" class="listmenu">Sous-Menu 1.2</a><br />
            <a href="#" class="listmenu">Sous-Menu 1.3</a><br />
        </div>
    
    
    <? /* Tarifs */ ?>
    <a href="tarif.php"><img src="images/herakles_20.jpg" alt="" border="0" class="tarif" /></a>
    
    <? /* Contact */ ?>
    <a href="contact.php"><img src="images/herakles_18.jpg" alt="" border="0" class="contact"></a>
    <img src="images/herakles_21.gif" width="123" height="20" alt="" class="milieu6" />
</div>

le css

div.menu {
    position:absolute;
    background-image: url(images/fondmenu.jpg);
    width: 181px;
    height: 251px;
    top: 167px;
    left: 17px;
    font-weight: bold;
}

#smenu2 {
    position: absolute;
    width: 200px;
    height: 70px;
    left: 152px;
    top: 94px;
    border-width: 2px;
    border-style: solid;
    border-color: #006699;
    background-color: #dddddd;
    font-size: 1em;
    padding: 2px 5px;
    list-style-type: none;
    z-index: 100;
}

#smenu3 {
    position: absolute;
    width: 200px;
    height: 70px;
    left: 152px;
    top: 133px;
    border-width: 2px;
    border-style: solid;
    border-color: #006699;
    background-color: #dddddd;
    font-size: 1em;
    padding: 2px 5px;
    list-style-type: none;
    z-index: 100;
}

/* Test menu */
dt {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

Ne me dites pas que sur ce forum aussi on ne va pas me répondre >_<

Bonjour et bienvenue Dais

Pas de panique, si tu n'as pas encore de réponse, c'est sans doute qu'aucun spécialiste javascript n'a eu le temps de regarder ton problème... Patience

... Et puis, je ne suis pas certain qu'il soit au bon endroit... ton problème, d'après toi, est lié aux css ou à javascript ?

Si c'est javascript, le sujet sera déplacé !
Modifié par dominique (22 Mar 2005 - 15:11)

Merci de la réponse ^^

Le problème, à mon avis, viendrait plutôt du CSS pour certaines parties (par exemple le problème avec les liens dans le menu qui apparaît, problème n'existant pas si il y a du simple texte ou une image).
Pour le div qui ne veut pas disparaître du premier coup ça doit aussi être du CSS, vu que cela marche avec konqueror et IE.
Pour les divs qui apparaissent pour des menus qui ne devraient pas en avoir, vu que c'est censé être activé en passant sur une image ou le div en question, il y a un problème du côté du div, vu que l'image n'est pas codée pour afficher le menu. Comem si le div se trouvait caché sous l'image, et que passer sur l'image appelle le onmouseover du div.

Et pour le premier cas, il y a bien un rapport avec le fait d'arriver au niveau du div de texte, comme s'il était "au-dessus" du menu en ce qui concerne le onmouseover, malgré le fait qu'il soit en-dessous visuellement o_O

Bien entendu, je peux totalement me tromper, mais même si c'était ça, cela ne m'aide pas à régler ces problèmes .. sincèrement je ne comprends pas, que ce soit dans le premier cas ou le deuxième ..

Bon et bien .. pas grand monde pour répondre ..

si quelqu'un pense que c'est un problème de javascript, bougez le sujet svp, mais bon j'en doute quelque peu ..

EDIT: finalement je laisse tomber le onmouseover, ça marche mieux avec du onclick .. bizarre
Modifié par Dais (23 Mar 2005 - 19:56)