[Résolu] Menu déroulant récalcitrant sous IE6 par yojimbo - page 1

Bonjour.

Ma page actuelle a plusieurs problèmes sur IE6 (et uniquement ce navigateur !). Le menu déroulant n'est pas fonctionnel, il est impossible de l'utiliser. Chose étrange, il fonctionne parfaitement bien si je désactive la CSS. J'en conclu donc à une incompatibilité entre ma feuille de style et mon code javascript ?!?

Là, j'avoue que je suis perdu. Je vous copie/colle le code source complet de la page.

En vous remerciant d'avance de toutes vos pistes !

(j'ai aussi deux problèmes, des scrollbars horizontales et verticales qui apparaissent, mais bon...)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style>
body {
        margin: 10px 0;
        padding: 0;
        font: 11px/18px Verdana, Geneva, Arial, Helvetica, sans-serif;
        color: #000;
}

#page {
        margin: 0px;
        padding: 0px;
        width: 928px;
        height: 700px;
        min-height: 700px;
        height: auto;
        border: 2px solid #cb0000;
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        overflow: auto;
}

#head {
        margin: 0px;
        padding: 0px;
        margin-top: 20px;
        margin-bottom: 30px;
        text-align: center;
}

#menu {
        margin: 0px;
        padding: 0px;
        width: 120px;
        float: left;
        margin-left: 15px;
        margin-right: 10px;
}

#menu .rubriques_menu {
        border: 1px solid #cb0000;
        padding: 0px;
        margin: 0px; 
        margin-bottom : 10px;
}
        
#menu .element_menu {
        padding: 0px;
        margin: 0px; 
        margin-bottom : 10px;
}        

#menu .titre_menu_main  {
        padding: 0px;
        margin: 0px;
        padding-left : 10px;
        color: #cb0000;
        font-size: 16px;
        font-weight: bold;
}

#menu .titre_menu  {
        padding: 0px;
        margin: 0px;
        padding-left : 10px;
}

#menu .element_menu ul {
        margin: 0px;
        padding: 0px;
        padding-top: 5 px;
        padding-left : 20px;
        list-style-type: none;
}
                
#menu  li {
        padding: 0px;
        margin: 0px;
}                

#menu a  {
        border: none;
        text-decoration: none;
        color: #cb0000;
}
                
#menu a:hover {
        border: none;
        background-color: #cb0000;
        color: #000;
}



#content {
        margin: 0px;
        padding: 0px;
        float: right;
        width: 728px;
        margin-left: 5px;
        margin-right: 30px;
}

#foot {
        margin: 0px;
        padding: 0px;
        width: 600px;
        margin-right: auto;
        margin-left: auto;
        clear: both;
        margin-left: 160px;
        padding-top: 50px;
        margin-bottom: 10px;
        text-align: center;
}

#foot p {
        margin: 0px;
        padding: 0px;
        text-align: center;
}
</style>
</head>

<body>
<div id="page">
<div id="head">
        <h1>Test</h1>
</div>

<div id="menu">

        <div class="rubriques_menu">
        <div class="element_menu">

                <h3 class="titre_menu_main">Menu</h3>
        </div>
        
        <div class="element_menu" onMouseOver='document.getElementById("sous_menu_test1").style.display = "block";' onMouseOut='document.getElementById("sous_menu_test1").style.display = "none";'>
                <h3 class="titre_menu">Cp</h3>
                <ul id="sous_menu_test1" style="display: none;">
                        <li><a href="./test.php" title="Test">Test </a></li>
                        <li><a href="./test.php" title="Test">Test </a></li>
                </ul>

        </div>
        
        <div class="element_menu" onMouseOver='document.getElementById("sous_menu_test2").style.display = "block";' onMouseOut='document.getElementById("sous_menu_test2").style.display = "none";'>
                <h3 class="titre_menu">Test</h3>
                <ul id="sous_menu_test2" style="display: none;">
                        <li><a href="./test.php" title="Test">Test </a></li>
                        <li><a href="./test.php" title="Test">Test</a></li>
                        <li><a href="./test.php" title="Test">Test</a></li>
                        <li><a href="./test.php" title="Test">Test</a></li>
                        <li><a href="./test.php" title="Test">Test</a></li>
                        <li><a href="./test.php" title="Test">Numération </a></li>
                </ul>
        </div>
        </div>
</div>

        <div id="content">
                <h2>Test</h2>

                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap 
                into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
                passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>
                
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap 
                into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
                passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>
                
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap 
                into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
                passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>
                
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap 
                into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
                passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>
                
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
                when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap 
                into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum 
                passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>
        </div>

<div id="foot">
        <p>Copyright &copy; Test - Tous droits réservés</p>

</div>
</body>
</html>

yojimbo

3 novembre 2010 à 21:30:24

LCaba

3 novembre 2010 à 21:42:02

Salut,
Corrige ton post pour colorer ton code en ajoutant type="html" et poste aussi le script.
Et ton code en l'état, ne donne aucun menu déroulant...

Cabinet vétérinaire à Angers

3 novembre 2010 à 22:43:15

Salut.

J'ai modifié le code pour que la couleur y soit. En tout cas, le script est complet. Il y a tout. Quand je sauvegarde ce que j'ai copié et que je l'ouvre dans un navigateur, aucun problème chez moi. J'ai même inclus la css dedans pour que tout soit disponible.

Le code du menu déroulant en JS est inclus, il est très simple c'est juste un onMouseOver. Aucun problème avec Firefox et IE > 7.0

Golmote

4 novembre 2010 à 1:57:00

Je suis bien incapable d'expliquer pourquoi, mais les deux lignes qui font bugguer ton menu sont :

width: 120px;
float: left;

dans le sélecteur #menu

foxer90

4 novembre 2010 à 2:12:57

Si tu veux régler ton problème pour IE6 (sans trop rien modifier), il suffit simplement de rajouter un width à ta classe element_menu.

#menu .element_menu 
{
    padding: 0px;
    margin: 0px; 
    margin-bottom : 10px;
    width: 100%;
}

4 novembre 2010 à 7:31:49

Alors là !!! Un énorme merci ! Mais... pourquoi le fait qu'il n'y ait pas de "width=100%" faisait buguer le menu déroulant en JS ?

4 novembre 2010 à 23:08:09

Pour faire simple, le problème était dû au fait que ton menu ne faisait pas la taille maximale.

Le menu: 120px
Le contenu: 728px
-----
Total: 848px

Donc ta page faisait 848px (plus les différents margins...). Par conséquent tes éléments ne prenaient pas le width total disponible qui est de 928px. Puis, en faisant un float sur la gauche de ton menu, étant donné qu'il y avait de l'espace de disponible, le menu se collait sur la gauche et cela provoquait l'erreur pour IE6.

4 novembre 2010 à 23:10:55

Ah ok, ben écoute, merci bien

Menu déroulant récalcitrant sous IE6

Menu déroulant récalcitrant sous IE6

Supprimer

Modérer

Signaler le message aux modérateurs