bug d'affichage sur firefox

**pascalbm** · 14/11/2007, 13h34

Bonjour

Je veux utiliser le CSS pour un menu vertical. J’ai trouvé un script qui fonctionne bien sur IE7 mais sur firefox cela ne fonctionne pas. Voici les codes de la page ainsi que du CSS
Quelqu’un pourrait m’indiquer mon erreur si j’en ai fais une ou me dire ce que je dois faire pour que cela fonctionne sur ce navigateur voir d’autres
Merci d’avance pour l’aide qui pourra m’être apporté

Le code CSS créé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 html, body
{
background-image:url(../images/fond.jpg);
text-align:center;
}
div#conteneur
{
border:#000099 solid 3px;
width:760px;
height:500px;
text-align:left;
}
div#entete
{
background:url(../images/titre.jpg) no-repeat;
background-position:center;
text-align:center;
width:760px;
height:130px;
text-align:left -5000px;
}
div#menu ul#menulist li ul
{ 
display:none; 
}
div#menu ul#menulist li:hover>ul
{
display:block;
}
div#menu ul#menulist
{
      font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #0F4D2A;
    position: static;
    left: 10px;
    margin: 15px;
}    
div#menu ul#menulist, div#ex1 ul#menulist ul
{
  /* border:1px solid #990000;*/
  list-style:none;
  margin:0;
  padding:0;
  width:13em;
  _width:13em;
  background-color: #141545;
  border: 1px solid;
    border-top-color: #FFFFFF;
    border-left-color: #FFFFFF;
    border-bottom-color: #67B289;
    border-right-color: #67B289;
 
}
div#menu ul#menulist ul
{
    position:absolute;
    top:-1px;
    left:12.7em;
}
div#menu ul#menulist li
{
  position:relative;
  margin:0px;
  padding:0px;
  _display:inline;
}
div#menu ul#menulist a
{
  display:block;
  width:100%;
  text-decoration: none;
  text-indent: 1em;
  width: 12.7em;
  padding: 5px 0;
}
div#menu ul#menulist li:hover, div#menu ul#menulist li a:hover
{
  color: #FFFFFF;
  background-color: #738CC2;
}
div#menu ul#menulist li.smenu
{
    background-image:url(../images/flecheh.jpg);
    background-position: 11.3em;
    background-repeat: no-repeat;
}
div#menu ul#menulist li.smenu:hover, div#menu ul#menulist li.smenu>a:hover
{
    background-image:url(../images/flecheb.jpg);
    background-position: 11.3em;
    background-repeat: no-repeat;
}
div#menu ul#menulist a
{
color:#FFCC00;
text-decoration:none;
}

et mon code html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<script type="text/javascript" src="pages/css/menuderoulant.js"></script>
<link href="pages/css/general.css" rel="stylesheet" type="text/css" />
</head>
<body onload="setHover('menulist')">
    <div id="conteneur">
    <div id="entete"></div>
    <div id="menu">
    <ul id="menulist">
    <li><a href="index.php">Accueil</a></li>
    <li class="smenu"><a href="#">Professionnels</a></li>
        <ul id="menulist" >
            <li class="smenu"><a href="#">Ventes</a></li>
                <ul id="menulist">
                <li><a href="pages/fr/resultat.php">Maisons</a></li>
                <li><a href="pages/fr/resultat.php">Villas</a></li>
                <li><a href="pages/fr/resultat.php">Riads</a></li>
                <li><a href="pages/fr/resultat.php">Appartements</a></li>
                <li><a href="pages/fr/resultat.php">Bureaux</a></li>
                <li><a href="pages/fr/resultat.php">Terrains</a></li>
                </ul>
            <li class="smenu"><a href="#">Locations</a></li>
                <ul id="menulist">
                <li><a href="pages/fr/resultat.php">Maisons</a></li>
                <li><a href="pages/fr/resultat.php">Villas</a></li>
                <li><a href="pages/fr/resultat.php">Riads</a></li>
                <li><a href="pages/fr/resultat.php">Appartements</a></li>
                <li><a href="pages/fr/resultat.php">Bureaux</a></li>
                <li><a href="pages/fr/resultat.php">Terrains</a></li>
                </ul>
      </ul>
    <li class="smenu"><a href="#">Particuliers</a></li>
         <ul id="menulist">
            <li class="smenu"><a href="#">Ventes</a></li>
                <ul id="menulist">
                <li><a href="pages/fr/resultat.php">Maisons</a></li>
                <li><a href="pages/fr/resultat.php">Villas</a></li>
                <li><a href="pages/fr/resultat.php">Riads</a></li>
                <li><a href="pages/fr/resultat.php">Appartements</a></li>
                <li><a href="pages/fr/resultat.php">Bureaux</a></li>
                <li><a href="pages/fr/resultat.php">Terrains</a></li>
                </ul>
            <li class="smenu"><a href="#">Locations</a></li>
                <ul id="menulist">
                <li><a href="pages/fr/resultat.php">Maisons</a></li>
                <li><a href="pages/fr/resultat.php">Villas</a></li>
                <li><a href="pages/fr/resultat.php">Riads</a></li>
                <li><a href="pages/fr/resultat.php">Appartements</a></li>
                <li><a href="pages/fr/resultat.php">Bureaux</a></li>
                <li><a href="pages/fr/resultat.php">Terrains</a></li>
                </ul>
      </ul>                
    <li><a href="pages/fr/contact.php">Contact</a></li>
    </ul>
    </div>
    <div id="piedpage">
    </div>
    </div>
</body>

Merci encore pour l'aide qui peut m'être fourni

**mLk92** · 15/11/2007, 09h43

Il faudrait que tu cible le problème, parce que là c'est un peu vague, essai de valider ton code par w3c, il te trouvera peut etre le problème

**pascalbm** · 15/11/2007, 10h58

En fait le probleme est que les sous menus sont affiché en permanence en haut de la fenêtre sur firefox alors que sur IE les sous-menus ne s'affiche qu'au passage de la souris et à coté des menus parents comme je le veux.
Je pense qu'il y a une erreur dans mes codes CSS mais je ne vois pas ou.
Donc si quelqu'un pouvait m'aider....

Merci d'avance

**mLk92** · 15/11/2007, 11h12

Déja il ya un text-align avec la propriété left et -5000px

Et puis c'est surment ta position: static qui bloque

**pascalbm** · 15/11/2007, 13h09

Le text-align est déja supprimer, mais pour le static que me propose tu à la place ? j'ai essyé d'autres solution qui n'ont rien donné

**mLk92** · 15/11/2007, 15h40

bah déja, on peut déja savoir pourquoi tu met une position static ici ?

Et pourquoi pas essayer une position relative

**pascalbm** · 15/11/2007, 17h37

Dans le code que j'avai récupéré il y avait "static". J'ai modifier par relative pour voir. ca modifie légerement l'emplacement de la boite.
Par contre, j'ai re- saisi le code Html et maintenant cela fonctionne bien sur les 2 navigateurs.
Je te remercie pour ton aide, à la prochaine

bug d'affichage sur firefox

CSS

Discussions similaires

Partager

Partager