Menu déroulant fonctionnant sous IE, Mozilla, mais bug sous Safari

**brieux** · 07/09/2009, 15h28

bonjour bonjour
je vais vous décrire mon problème, avec un peu de bol des gens l'ont déjà rencontré
le site que je développe actuellement fonctionne quasiment partout après de nombreux tests, mais il reste 1 page (l'accueil...) qui ne fonctionne pas correctement sous safari

le problème sur le site en question, le menu déroulant ne s'affiche pas juste sous l'index, alors que partout autre part cela fonctionne.

toutes les autres pages fonctionnent, alors que le menu déroulant est le même.

site

je supposerais que le problème vient du "menuhorizontal"
je poste le code dans le doute, mais ce qui est étrange c'est que le problème n'est qu'ici...

Code XHTML :

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
  <link href="horizontal.css" rel="stylesheet" type="text/css">
  <link type="image/x-icon" rel="Shortcut Icon" href="">
 
 
<style>
a{
text-decoration:none;
}
</style> 
  <table align="center" width="1000" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="81" height="50" bgcolor="#0099FF">
        <p><font color="#FFFFFF" size="5" face="Viner Hand ITC"><b>&nbsp; Infos</b></font></p>
      </td>
 
      <td width="450">
        <div align="left">
          <font color="#0099FF" size="5" face="Viner Hand ITC"><acronym title=
          "infostravaux.com pour trouver les entreprises et artisans du bâtiment de votre région afin de raaliser tous vos travaux de gros oeuvre et second oeuvre pour vote bien immobilier maison, appartement, villa. Construction, r&eacute;novation, am&eacute;nagement et d&eacute;coration">
          &nbsp;Travaux.com</acronym></font>
        </div>
      </td>
 
      <td width="411" rowspan="2">
        <p align="left"><font face="Geneva, Arial, Helvetica, sans-serif" color="#0099FF" size="2"><i><b><acronym title=
        "choisir la rubrique et la r&eacute;gion, vous trouverez les sites web des pros pr&egrave;s de chez vous">ARTISANS ET ENTREPRISES DU BATIMENT VOUS<br> INVITENT A VISITER LEUR SITE
        WEB...</acronym></b></i></font></p>
      </td>
    </tr>
 
    <tr>
      <td height="19" bgcolor="#0099FF">
        <div align="center">
          <a href="http://www.infostravaux.com/"><font color="#FFFFFF" face="Verdana, Arial, Helvetica, sans-serif"><strong>Accueil</strong></font></a>
        </div>
      </td>
 
      <td width="508">&nbsp;</td>
    </tr>
  </table><br>
<table align="center"><tr><td width="1060">
  <div id="menu">
    <ul class="niveau1">
      <li class="sousmenu">
        <a title="Mat&eacute;riaux de construction, &eacute;quipement, location, visitez les sites web des entreprises pr&egrave;s de chez vous">Matériaux</a>
 
        <ul class="niveau2">
          <li class="sousmenu">
          <a href="/materiaux-de-construction/construire-amenager-renover-21.php">Bourgogne</a></li>
 
          <li><a href="/materiaux-de-construction/construire-amenager-renover-35.php">Bretagne</a></li>
 
          <li><a href="/materiaux-de-construction/construire-amenager-renover-14.php">Normandie</a></li>
 
          <li><a href="/materiaux-de-construction/construire-amenager-renover-44.php">Pays de Loire</a></li>
 
          <li><a href="/materiaux-de-construction/construire-amenager-renover-73.php">Rhone-Alpes</a></li>
        </ul>
      </li>
 
      <li class="sousmenu">
        <a title="Vente et pose de carrelage, parquets, rev&ecirc;tement de sol, visitez les sites web des entreprises pr&egrave;s de chez vous">Sols</a>
 
        <ul class="niveau2">
          <li class="sousmenu">
          <a href="/sols/parquet-massif-poser-du-carrelage-pose-faience-58.php">Bourgogne</a></li>
 
          <li><a href="/sols/parquet-massif-poser-du-carrelage-pose-faience-35.php">Bretagne</a></li>
 
          <li><a href="/sols/parquet-massif-poser-du-carrelage-pose-faience-50.php">Normandie</a></li>
 
          <li><a href="/sols/parquet-massif-poser-du-carrelage-pose-faience-49.php">Pays de Loire</a></li>
 
          <li><a href="/sols/parquet-massif-poser-du-carrelage-pose-faience-73.php">Rhone-Alpes</a></li>
        </ul>
      </li>
 
      <li class="sousmenu">
        <a title="toute &eacute;nergie , chaudi&egrave;re, radiateur, &eacute;nergie renouvelable ; a&eacute;rothemie, g&eacute;othermie, chauffage au bois, solaire etc...">Chauffage</a>
 
        <ul class="niveau2">
          <li class="sousmenu">
          <a href="/chauffage/entreprise-de-batiment-plombier-climatisation-71.php">Bourgogne</a></li>
 
          <li><a href="/chauffage/entreprise-de-batiment-plombier-climatisation-22.php">Bretagne</a></li>
 
          <li><a href="/chauffage/entreprise-de-batiment-plombier-climatisation-61.php">Normandie</a></li>
 
          <li><a href="/chauffage/entreprise-de-batiment-plombier-climatisation-53.php">Pays de Loire</a></li>
 
          <li><a href="/chauffage/entreprise-de-batiment-plombier-climatisation-73.php">Rhone-Alpes</a></li>
        </ul>
      </li>
 
      <li class="sousmenu">
        <a title="Cuisine contemporaine ou rustique, visitez les sites web des entreprises pr&egrave;s de chez vous">Cuisine</a>
 
        <ul class="niveau2">
          <li class="sousmenu">
          <a href="/cuisiniste/pose-de-meuble-et-mobilier-de-cuisine-ilot-tendance-71.php">Bourgogne</a></li>
 
          <li><a href="/cuisiniste/pose-de-meuble-et-mobilier-de-cuisine-ilot-tendance-22.php">Bretagne</a></li>
 
          <li><a href="/cuisiniste/pose-de-meuble-et-mobilier-de-cuisine-ilot-tendance-76.php">Normandie</a></li>
 
          <li><a href="/cuisiniste/pose-de-meuble-et-mobilier-de-cuisine-ilot-tendance-53.php">Pays de Loire</a></li>
 
          <li><a href="/cuisiniste/pose-de-meuble-et-mobilier-de-cuisine-ilot-tendance-01.php">Rhone-Alpes</a></li>
        </ul>
      </li>
 
      <li class="sousmenu">
        <a title="Cheminée, poële, taille de pierre, visitez les sites web des entreprises près de chez vous">Cheminée</a>
 
        <ul class="niveau2">
          <li class="sousmenu">
          <a href="/cheminee/pose-de-poele-cuisiniere-insert-et-foyers-a-bois-71.php">Bourgogne</a></li>
 
          <li><a href="/cheminee/pose-de-poele-cuisiniere-insert-et-foyers-a-bois-35.php">Bretagne</a></li>
 
          <li><a href="/cheminee/pose-de-poele-cuisiniere-insert-et-foyers-a-bois-27.php">Normandie</a></li>
 
          <li><a href="/cheminee/pose-de-poele-cuisiniere-insert-et-foyers-a-bois-44.php">Pays de Loire</a></li>
 
          <li><a href="/cheminee/pose-de-poele-cuisiniere-insert-et-foyers-a-bois-01.php">Rhone-Alpes</a></li>
        </ul>
      </li>
 
      <li class="sousmenu">
        <a title="Menuiserie int&eacute;rieure et ext&eacute;rieure ; escalier, porte, fen&ecirc;tre, dressing, portail, automatisme, etc">Menuiserie</a>
 
        <ul class="niveau2">
          <li class="sousmenu">
          <a href="/menuiserie/fenetre-escalier-porte-interieure-et-exterieure-71.php">Bourgogne</a></li>
 
          <li><a href="/menuiserie/fenetre-escalier-porte-interieure-et-exterieure-22.php">Bretagne</a></li>
 
          <li><a href="/menuiserie/fenetre-escalier-porte-interieure-et-exterieure-27.php">Normandie</a></li>
 
          <li><a href="/menuiserie/fenetre-escalier-porte-interieure-et-exterieure-49.php">Pays de Loire</a></li>
 
          <li><a href="/menuiserie/fenetre-escalier-porte-interieure-et-exterieure-01.php">Rhone-Alpes</a></li>
        </ul>
      </li>
 
      <li class="sousmenu">
        <a>Bains</a>
 
        <ul class="niveau2">
          <li class="sousmenu">
          <a href="/salledebains/renover-sa-douche-spa-faience-plomberie-58.php">Bourgogne</a></li>
 
          <li><a href="/salledebains/renover-sa-douche-spa-faience-plomberie-35.php">Bretagne</a></li>
 
          <li><a href="/salledebains/renover-sa-douche-spa-faience-plomberie-27.php">Normandie</a></li>
 
          <li><a href="/salledebains/renover-sa-douche-spa-faience-plomberie-72.php">Pays de Loire</a></li>
 
          <li><a href="/salledebains/renover-sa-douche-spa-faience-plomberie-01.php">Rhone-Alpes</a></li>
        </ul>
      </li>
 
      <li class="sousmenu">
        <a title="am&eacute;nagement jardin, piscine, r&eacute;cup&eacute;ration eau, cl&ocirc;ture, portail visitez les sites web des entreprises pr&egrave;s de chez vous">Jardin</a>
 
        <ul class="niveau2">
          <li class="sousmenu">
          <a href="/jardin/jardiner-choix-de-piscine-enterree-couverte-21.php">Bourgogne</a></li>
 
          <li><a href="/jardin/jardiner-choix-de-piscine-enterree-couverte-35.php">Bretagne</a></li>
 
          <li><a href="/jardin/jardiner-choix-de-piscine-enterree-couverte-27.php">Normandie</a></li>
 
          <li><a href="/jardin/jardiner-choix-de-piscine-enterree-couverte-44.php">Pays de Loire</a></li>
 
          <li><a href="/jardin/jardiner-choix-de-piscine-enterree-couverte-69.php">Rhone-Alpes</a></li>
        </ul>
      </li>
 
      <li class="sousmenu">
        <a>Déco</a>
 
        <ul class="niveau2">
          <li class="sousmenu">
          <a href="/deco/idee-decoration-peintre-21.php">Bourgogne</a></li>
 
          <li><a href="/deco/idee-decoration-peintre-35.php">Bretagne</a></li>
 
          <li><a href="/deco/idee-decoration-peintre-27.php">Normandie</a></li>
 
          <li><a href="/deco/idee-decoration-peintre-44.php">Pays de Loire</a></li>
 
          <li><a href="/deco/idee-decoration-peintre-73.php">Rhone-Alpes</a></li>
        </ul>
      </li>
 
      <li class="sousmenu">
        <a>Autres</a>
 
        <ul class="niveau2">
          <li class="sousmenu">
            <a href="#">aménagement de comble</a>
 
            <ul class="niveau3">
              <li><a href="/amenagement-de-comble/amenager-les-combles-ouest.php">Ouest</a></li>
 
              <li><a href="/amenagement-de-comble/amenager-les-combles-est.php">Est</a></li>
            </ul>
          </li>
 
          <li class="sousmenu">
            <a href="#">alarme domotique</a>
 
            <ul class="niveau3">
              <li><a href="/alarme/securite-incendie-surveillance-video-vols-ouest.php">Ouest</a></li>
 
              <li><a href="/alarme/securite-incendie-surveillance-video-vols-est.php">Est</a></li>
            </ul>
          </li>
 
          <li class="sousmenu">
            <a href="#">électricité</a>
 
            <ul class="niveau3">
              <li><a href="/electricite/electricien-pour-installation-electrique-ouest.php">Ouest</a></li>
 
              <li><a href="/electricite/electricien-pour-installation-electrique-est.php">Est</a></li>
            </ul>
          </li>
 
          <li class="sousmenu">
            <a href="#">isolation extérieure</a>
 
            <ul class="niveau3">
              <li><a href="/isolation/bardage-interieur-et-exterieur-ouest.php">Ouest</a></li>
 
              <li><a href="/isolation/bardage-interieur-et-exterieur-est.php">Est</a></li>
            </ul>
          </li>
 
          <li class="sousmenu">
            <a href="#">traitement de l'eau</a>
 
            <ul class="niveau3">
              <li><a href="/traitement-de-leau/recuperation-et-traitement-eau-de-pluie-ouest.php">Ouest</a></li>
 
              <li><a href="/traitement-de-leau/recuperation-et-traitement-eau-de-pluie-est.php">Est</a></li>
            </ul>
          </li>
        </ul>
      </li>
 
      <li class="sousmenu">
        <a>Contact</a>
 
        <ul class="niveau2">
          <li><a href="/contact/contact.html"><acronym title="je désire un devis pour mes travaux">Devis</acronym></a></li>
 
          <li><a href="/forum/connexion.php"><acronym title="posez vos questions, &eacute;changez, tout ce qui concerne la construction, la r&eacute;novation, l'am&eacute;nagement, la d&eacute;coration, de votre maison, les astuces du bricoleur">Forum</acronym></a></li>
 
          <li><a href="mailto:ouest@infostravaux.com?subject=Annonces infostravaux&body=Bonjour, 
          je desire de plus amples informations sur vos annonces, pourrions-nous convenir d'un rendez-vous telephonique. 
          Voici mes coordonnees:" ><acronym title="je suis professionnel, je d&eacute;sire des informations pour annoncer le site de l'entreprise sur infostravaux.com. Des milliers de personnes qui construisent, am&eacute;nagent, r&eacute;novent et d&eacute;corent leur maison.">
          Devenir annonceur</acronym></a></li>
        </ul>
      </li>
    </ul>
  </div>
  </td></tr></table>

merci d'avance pour toute aide, là j'avoue que je sèche...

**brieux** · 07/09/2009, 16h29

bon, j'ai réussit a cerner le problème mais pas la façon de le résoudre, pas encore on va dire

mon problème viendrais de mon fichier "horizontal.css" que j'ai du modifier pour être "compatible" avec tout les IE au final

le fichier actuel

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
 
 
body {behavior: url(../csshover.htc);}
 
.img {
  position: absolute;
  top: 80px;
  left: 135px;
}
.membre {
  position: absolute;
  top: 70px;
  right:170px;
}
 
div#menu a {color:#FFFFFF; font-family: Trebuchet MS, Arial; font-size: small;}
div#menu ul {padding: 0; margin:0px; background: white; text-align:center}
div#menu li {background:#FF9900;}
div#menu li:hover {display: block; background: #0099FF;}
div#menu li.sousmenu:hover {display: block; background: #0099FF;}
/* rejout couleur de fond */
div#menu li.sousmenu {background-color:#FF9900}
/* rajout pr pour fleche direction bas et couleur de fond*/
div#menu li.plop { background-color:#0099FF;}
 
/* une petite bordure en top*/
div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid ; color:#33CCFF;}
 
div#menu ul ul {position: absolute;display:none; width:90px}
div#menu li a {text-decoration: none; padding: 4px 0 4px; display:block;width:90px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {display: block;} 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu ul.niveau3 {top:-1px; left: 60px;}
div#menu ul.niveau4 {top:-1px; left: 60px;}
 
/* rajout de couleur de fond et de survol */
div#menu ul.niveau3 li { background: #FF9900}
div#menu ul.niveau3 li:hover {display: block; background: #0099FF}
 
 
/* rajout de couleur de fond et de survol */
div#menu ul.niveau4 li { background: #FF9900}
div#menu ul.niveau4 li:hover {display: block; background: #0099FF}

l'ancien code (fonctionnant sous safari) :

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
 
body {behavior: url(csshover.htc);}
 
.img {
  position: absolute;
  top: 80px;
  left: 135px;
}
.membre {
  position: absolute;
  top: 70px;
  right:170px;
}
div#menu a {color:#FFFFFF; font-family: Trebuchet MS, Arial; font-size: small;}
div#menu ul {padding: 0; margin:0px; background: white; text-align:center}
div#menu li {background:#FF9900;}
div#menu li:hover {background: #0099FF;}
div#menu li.sousmenu:hover {background: #0099FF;}
/* rejout couleur de fond */
div#menu li.sousmenu {background-color:#FF9900}
/* rajout pr pour fleche direction bas et couleur de fond*/
div#menu li.plop { background-color:#0099FF;}
 
/* une petite bordure en top*/
div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid ; color:#33CCFF;}
 
div#menu ul ul {position: absolute;display:none; width:90px}
div#menu li a {text-decoration: none; padding: 4px 0 4px; display:block;width:90px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu ul.niveau3 {top:-1px; left: 90px;}
div#menu ul.niveau4 {top:-1px; left: 90px;}
 
/* rajout de couleur de fond et de survol */
div#menu ul.niveau3 li { background: #FF9900}
div#menu ul.niveau3 li:hover { background: #0099FF}
 
/* rajout de couleur de fond et de survol */
div#menu ul.niveau4 li { background: #FF9900}
div#menu ul.niveau4 li:hover { background: #0099FF}

les différents "display: block;" vennant du fait que sous IE 7 il n'affichais pas le menu, je souhaiterais donc un css pour IE, et un pour mozila, mais je ne connais pas le code nécessaire.

merci d'avance

**brieux** · 07/09/2009, 16h55

aller hop je fini mon monologue, sur quelque chose que je maitrise pas,

il faudrait que j'arrive a avoir pour IE :

Code :

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

1
2
div#menu li:hover {display: block; background: #0099FF;}
div#menu li.sousmenu:hover {display: block; background: #0099FF;}

pour les autres navig :

Code :

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

1
2
div#menu li:hover {background: #0099FF;}
div#menu li.sousmenu:hover { background: #0099FF;}

si quelqu'un a une idée je suis preneur

**Macmillenium** · 07/09/2009, 17h15

Bonjour,

Pour viser IE, il faut utiliser les commentaires conditionnels.

**brieux** · 08/09/2009, 08h44

bonjour et merci, j'avais réussit a comprendre cela au final, mais autant pour qu'IE voit quelque chose pas de prob, mais du coup pour les autres ?

ou je peu faire un

Code :

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

1
2
3
 
div#menu li:hover {<--display: block;--> background: #0099FF;}
div#menu li.sousmenu:hover {<--display: block; --> background: #0099FF;}

cela fonctionnerais? je m'y connais encore peu en css donc je ne sais pas exactement ce qui est possible et ce qui ne l'est pas dans le code

ou un appel au css dans ce genre

Code :

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

1
2
 
<!--[if IE]><link href="horizontal.css" rel="stylesheet" type="text/css"><![endif]-->

jusqu'à la pas de problème , mais si je met un <link href="horizontal2.css" rel="stylesheet" type="text/css"> par exemple, IE va pas tenter de lire les 2 ?

**Macmillenium** · 08/09/2009, 10h54

Envoyé par brieux

Code :

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

1
2
3
 
div#menu li:hover {<--display: block;--> background: #0099FF;}
div#menu li.sousmenu:hover {<--display: block; --> background: #0099FF;}

cela fonctionnerais?

Non.

Envoyé par brieux

ou un appel au css dans ce genre

Code :

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

1
2
 
<!--[if IE]><link href="horizontal.css" rel="stylesheet" type="text/css"><![endif]-->

jusqu'à la pas de problème , mais si je met un <link href="horizontal2.css" rel="stylesheet" type="text/css"> par exemple, IE va pas tenter de lire les 2 ?

En effet, IE va lire les deux, il faut donc mettre la feuille de style IE après la feuille de style principale.

**brieux** · 08/09/2009, 11h07

merci j'avance dans mon problème

il suffirait donc de faire

Code :

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

1
2
  <link href="horizontal2.css" rel="stylesheet" type="text/css">
<!--[if IE]><link href="horizontal.css" rel="stylesheet" type="text/css"><![endif]-->

dans le "horizontal2.css"

Code :

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

1
2
div#menu li:hover {background: #0099FF;}
div#menu li.sousmenu:hover {background: #0099FF;}

dans le "horizontal.css"

Code :

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

1
2
3
 
div#menu li:hover {display: block; background: #0099FF;}
div#menu li.sousmenu:hover {display: block; background: #0099FF;}

cela récrira la partie du code sans aucun probleme?

**Macmillenium** · 08/09/2009, 11h15

Exactement, en plus, les déclarations (propriété : valeur) de horizontal.css surclassent celles de horizontal2.css.

**brieux** · 08/09/2009, 11h26

merci beaucoup, je vais tester cela cette aprem, et mettre le post en résolu des que j'aurais pu tester

un mystère du css en moins

**brieux** · 10/09/2009, 09h37

arg...
comment ne pas avoir le net pendant 2 jours et revenir ca marche plus

a priori mon

Code :

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

1
2
3
4
5
6
7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
 
  <link href="horizontal.css" rel="stylesheet" type="text/css">
  <!--<link href="horizontal2.css" rel="stylesheet" type="text/css">-->
  <link type="image/x-icon" rel="Shortcut Icon" href="">

ne passe absolument pas au niveau d'IE, il ne lit que le premier CSS...

**Macmillenium** · 10/09/2009, 09h54

Pourtant tu as déjà trouvé le bon code :

Code :

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

1
2
<!--[if IE]><link href="horizontal.css" rel="stylesheet" type="text/css"><![endif]-->

**brieux** · 10/09/2009, 10h58

oui oui c'est ce que j'avais fait a la base pas de problème, mais j'ai remarqué que cela ne changeais rien, enfin je re test de suite

ayant testé, le site affiche toujours soit pas sur safari le menu déroulant
soit sur IE 7 le menu en décale (donc in cliquable)

actuellement j'ai
(sur la page principale) :

Code :

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

1
2
3
  <link href="horizontal2.css" rel="stylesheet" type="text/css">
 <!--[if IE]><link href="horizontal.css" rel="stylesheet" type="text/css"><![endif]-->
  <link type="image/x-icon" rel="Shortcut Icon" href="">

sur horizontal.css:

Code :

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

1
2
3
4
5
6
div#menu a {color:#FFFFFF; display: block; font-family: Trebuchet MS, Arial; font-size: small;}
div#menu ul {padding: 0; margin:0px; background: white; text-align:center}
div#menu li {background:#FF9900;}
 
div#menu li:hover {display: block;  background: #0099FF;}
div#menu li.sousmenu:hover {display: block;  background: #0099FF;}

et sur horizontal2.css:

Code :

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

1
2
3
4
5
6
div#menu a {color:#FFFFFF; display:inline ; font-family: Trebuchet MS, Arial; font-size: small;}
div#menu ul {padding: 0; margin:0px; background: white; text-align:center}
div#menu li {background:#FF9900;}
 
div#menu li:hover {display: block; background: #0099FF;}
div#menu li.sousmenu:hover {display: block; background: #0099FF;}

**Macmillenium** · 10/09/2009, 13h20

Il faut commencer par regarder le code généré :
1. Tu as deux doctype, les éléments META et LINK doivent être entre les balises <head></head>, vérifie si tu as des includes serveurs qui causent ces problèmes;
2. Tu as un <![endif]> qui traine, tu n'as pas mis le bon code (cf. plus haut);
3. Ton code HTML est horrible.

Finalement, pour ton problème (désolé je n'ai pas eu le temps de regarder avant), tu n'as pas besoin d'attribuer d'autres styles à IE7, il suffit d'attribuer un left:0; aux UL positionnés en absolue afin de les placer à gauche et un top = hauteur des A :

Code css :

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

1
2
 
div#menu ul ul {position: absolute;display:none; width:90px; left:0; top:26px; }

Et vire les display:block sur div#menu li:hover et div#menu li.sousmenu:hover.

**brieux** · 10/09/2009, 16h23

pour le code html je sais malheureusement j'ai repris le site ou il en était, et sur certains points, j'aurais mieux fait de repartir a 0... mais bon, il y a déjà eu pas mal de temps passé dessus, donc pour l'instant je le fais fonctionner comme il faut, puis je verrais pour la suite

je vais tester de modifier le code que tu m'a dis on va voir si cela fonctionne
merci bien

Menu déroulant fonctionnant sous IE, Mozilla, mais bug sous Safari

CSS

Discussions similaires

Partager

Partager