Menu CSS et behavior pour IE6

**bigltnt** · 03/04/2007, 12h54

Bonjour, je suis dans une entreprise qui utilise IE6. Je voudrais faire des menus déroulants, et j'ai trouvé pour palier le non fonctionnement de IE6 avec les hover sur les listes.

Cependant je ne comprend toujours pas pourquoi cela ne marche pas. Mais ou est mon erreur ???

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
<body>
 
 
 
		<div id="entete">
			<img src="avatar.jpeg"/>
			<p> INTRANET </p>
		</div>
 
		<div id="conteneur">
			<div id="menu">
				<ul>
					<li> <a href="">Menu1</a>
						<ul class="smenu">
							<li>Sous-menu1</li>
							<li>Sous-menu1</li>
						</ul>
					</li>
					<li> Menu2 </li>
					<li> Menu3 </li>
				</ul>
 
			</div>
 
			<div id="contenu">
			<p>kjrjkgbhrkgbreibg</p>
			</diV>
 
		</div>
 
 
	</body>

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
 
#menu {
	width: 130px;
	height: 100%;
	float: left;
	margin: 0;
	padding: 0;
	color: gold;
	font-weight: bold;
}
 
#menu ul {
	list-style-type: none;
	margin-left: 0;
}
 
#menu ul li {
	width: 100px;
	height: 40px;
	font-family: "Rockwell Extra Bold", Andalus, "Arial Black";
	font-variant: small-caps;
	background-image: url("bouton1.jpg");
	background-repeat: no-repeat;
	line-height: 200%;
	margin: 10px;
}
 
#menu a, #menu a:visited, #menu a:link{
	display: block;
	width: 100%;
    height: 100%;
   	text-decoration: none;
 
}
 
.smenu {
	display: none;
}
 
#menu a:hover > .smenu { 
	behavior:url("csshover2.htc");
	display: block;	
}

De plus j'ai un décalage vers le bas de mes sous menu, je ne comprend pas non plus pourquoi.

Si vous voyez la solution .... merci !

PS: J'ai mis des behavior partout mais il y en a un dans le body{} du CSS

**Dan_A** · 03/04/2007, 13h51

Il n'y a pas assez d'éléments pour une réponse.
Il faudrait un lien vers une page qui montre le problème.
IE 6 ne sait pas interpréter #menu a:hover > .smenu et ne lit donc pas ce qui s'y trouve.
les fichiers htc et l'instruction behavior ne fonctionnent qu'avec IE et il vaut mieux les lier au travers de commentaires conditionnels ce qui permet de plus de ne pas mettre la pagaille pour IE 7 qui n'en a pas besoin.

**bigltnt** · 03/04/2007, 14h27

Salut ! Ben le problème c'est qu'il ne se passe rien ! Donc le lien vers la page (qui en plus est sur un intranet) ne changerais rien.

Juste le "#menu a:hover > .smenu { display: block;}" ne change rien du tout, et ne m'affiche pas la liste (<ul>et<li>) de ma classe .smenu.

Au début le hover était sur un <li> mais je l'ai changé pour essayer de le faire fonctionner. Comme je suis sur un intranet, pas la peine de se prendre la tête avec d'autres browser que IE6, seul existant dans l'entreprise.

Et le behavior:url("csshover2.htc") est la pour permettre a IE6 de gérer le hover. Mais pourquoi il ne se passe rien

Nom : Marchepo.JPG
Affichages : 78
Taille : 50,1 Ko

Voila l'aspect visuel, les menus de gauche ne réagissent pas, mais une rubrique devrait se deplier sur un "hover" pour afficher la suite de la liste, "display" initialement

**bigltnt** · 03/04/2007, 14h33

Ah oui, et voila le deuxieme problème de décalage des sous menus, je ne sais pas pourquoi. J'ai enlevé le "display"

Nom : Marchepo2.JPG
Affichages : 95
Taille : 56,5 Ko

Voici tout mon html
index.html

Et mon CSS en entier
style.css

Voila si qqun trouve une solution, merci a lui !!!!

**MasterOfChakhaL** · 03/04/2007, 14h50

Salut,

Le problème est que tu places la définition du comportement dans un endroit ou IE n'est pas capable de le voir.
Il te suffirait de déclarer le comportement pour ta page entière:

Code :

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

1
2
3
body {
  behavior: url(...);
}

**bigltnt** · 03/04/2007, 14h55

Non c'est pas ca ! Si tu lis le fichier css (voir lien precedent message) il est déjà dans le body, l'autre c'était un test pour voir (voir quoi je sais pas mais c'était un test a l'arrache).

Merci quand meme, mais ca viens d'ailleurs

**MasterOfChakhaL** · 03/04/2007, 15h03

ton fichier htc se trouve-t-il bien dans le même répertorie que le fichier css?

**bigltnt** · 03/04/2007, 15h34

Oui tout les fichiers sont ensembles dans un meme dossier (css, htc, html, ... tout). C'est un test et je vais conserver la structure principale quand je verrais que ca marche.
C'est quand meme étrange que ca ne veuille pas fonctionner

**bigltnt** · 03/04/2007, 16h27

Bon j'ai trouvé les deux problèmes;

Pour les "hover" qui ne marchaient pas, j'ai fait des classes uniquement sur mes <ul>, pour ne pas se perdre. Du coup je n'ai pas utilisé le ">" dans "#menu a:hover > .smenu". Et du coup quand c'est plus le bazarre ca marche.

POur le décalage dans le menu, je pense que c'était le "display: block" de "<a>" qui posait problème. Tant pis, avec les behavior plus besoin du lien. Je l'ai tout simplement supprimé.

Bon j'ai juste un nouveau problème, c'est le hover sur mes classes qui, quand le menu se deploit, me provoque un décalage. Je v étudier ca.

Merci pour votre aide a tous ^^

Voici le code de mon menu désormais

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
#menu {
	width: 130px;
	height: 100%;
	float: left;
	margin: 0;
	padding: 0;
	color: gold;
	font-weight: bold;
}
 
#menu ul {
	list-style-type: none;
	margin-left: 0;
 
}
 
ul.niveau1 li {
	width: 100px;
	height: 40px;
	font-family: "Rockwell Extra Bold", Andalus, "Arial Black";
	font-variant: small-caps;
	background-image: url("bouton1.jpg");
	background-repeat: no-repeat;
	line-height: 200%;
	margin: 10px;
	margin-top: 20px;
}
ul.niveau1 li:hover  ul.niveau2 {
	display: block;
}
 
#menu a {
	display: block;
	width: 100%;
    height: 100%;
   	text-decoration: none;
 
}
 
ul.niveau2 {
	display: block;
	margin: 0;
	padding: 0;
}

Et en html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="menu">
				<ul class="niveau1">
					<li> Menu1
						<ul class="niveau2">
							<li>Sous-menu1</li>
							<li>Sous-menu1</li>
						</ul>
					</li>
					<li> Menu2 
					</li>
					<li> Menu3 
					</li>
				</ul>
			</div>

Menu CSS et behavior pour IE6

CSS

Discussions similaires

Partager

Partager