Discussion :

[pasc06]

Bonjour,

Sur mon site j'ai développé un menu en css avec un déroulant sur la rubrique "Portrait"

Voici l'url : http://www.comeric.fr/IF/photographe-accueil.htm

J'ai pu tester le site sur IE6 grâce à un programme qui permet d'installer plusieurs versions de IE qui fonctionnent de façon autonome. Bien pratique ! Vous pouvez le télécharger à cette adresse : http://tredosoft.com/Multiple_IE

Le déroulant ne fonctionne pas sur IE6 , et j'aimerais le rendre compatible avec javascript.

J'ai pas mal bourlinguer sur le forum et j'ai compris que les styles avec li:hover ne sont pas pris en compte. J'ai testé plusieurs solutions, mais ça ne marche toujours pas... . Si vous pouviez m'aider ce serait sympa !

A noter que je suis un peu nul en css ! Merci d'avance pour votre aide !

Côté html (j'ai volontairement simplifié la liste) :

Code :

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

1
2
3
4
5
6
7
8
9
<ul id="menuDeroulant">
<li id="en-cours"><a href="#">Accueil</a>| </li>
<li><a href="#">Portrait</a>| 
     <ul class="sousMenu">
        <li><a href="#">Extérieur</a></li>
   	<li><a href="#">Studio</a></li>
     </ul>
</li>
</ul>

Côté css :

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
#menuDeroulant
{
 width: 630px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 letter-spacing: 0.1em;
 list-style-type: none;
 margin: 0 auto;
 padding: 0;
 border: 0;
 top: 0;
}   
 
#menuDeroulant li
{
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
}
 
#menuDeroulant #en-cours a {color: #bcb9a9;}
 
#menuDeroulant #pas-en-cours a {color: #000;}
 
#menuDeroulant #pas-en-cours a:hover {color: #bcb9a9;}
 
#menuDeroulant li a:hover { color: #bcb9a9; }
 
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 height: 1%;
 margin: 0;
 padding: 0.4em 0.4em;
 text-decoration: none;
}
 
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #000;
 margin: 0;
 border: 0;
 text-decoration: none;
 background:#787769;
}
 
#menuDeroulant .sousMenu
{
 display: none;
 list-style-type: none;
 margin: -6.3em 0 0 -0.4em;
 padding: 0.4em;
 border: 0;
 position: absolute;
 text-align : left;
}
 
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 70px;
 border-top: 1px solid transparent;
}			
 
#menuDeroulant .sousMenu li a:hover
{
 background:#787769;
 color:#bcb9a9;
}
 
#menuDeroulant li:hover > .sousMenu { display: block; }

[pasc06]

Bonjour

J'essaie toujours de rendre compatible IE6 la partie déroulante de l'option "Portrait" du menu CSS du site que je développe.

A présent le déroulant de l'option "Portrait" est bien compatible IE6 grâce au javascript que j'ai intégré.

Mais j'ai 1 souci :

- Sous FF et Sous IE8, le sous-menu se développe correctement (au dessus de l'option "Portrait"), mais sous IE6 le sous-menu se développe trop haut et décalé sur la droite (au dessus de l'option "Cérémonie")

Comment résoudre ce problème ? Merci pour votre aide

Côté 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
15
16
17
<ul id="menu">
 
	<li><a href="#">Accueil</a>| </li>
		<li>
			<a href="#">Portrait</a>|
				<ul>
					<li><a href="#">Extérieur</a></li>
					<li><a href="#">Studio</a></li>
				</ul>
               </li>  
	<li><a href="#">Cérémonie</a>| </li>
        <li><a href="#">Corporate</a>| </li>
	<li><a href="#">Evénementiel</a>| </li>
	<li><a href="#">Support</a>| </li>
        <li><a href="#">Photothèque</a>| </li>
	<li><a href="#">Contact</a></li>
</ul>

Côté CSS :

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
@charset "UTF-8";
 
#menu, #menu ul /* Liste */    
{	
		width: 630px;
		letter-spacing: 0.1em;
		margin: 0;
		padding: 0;
		border: 0;
        list-style : none; /* on supprime le style par défaut de la liste */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
#menu /* Ensemble du menu */
{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size : 10px; /* hauteur du texte : 12 pixels */
}
 
#menu a /* Contenu des listes */
{
        padding-right : 0.4em; /* aucune marge intérieure */
		padding-left : 0.4em;
        color:#000; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné)*/
}
 
#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color:#bcb9a9; /* On change la couleur du texte */
}
 
#menu li /* Elements des listes */      
{ 
        float : left; 
}
 
#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 70px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
		margin: -5.5em 0 0 -0.4em;	
}
 
#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #000 ; /* on met une bordure noire en haut de chaque élément d'une sous liste */
		width: 70px;		
		background:#787769;
		text-align : left;
		line-height : 18px;
}
 
#menu li:hover ul, #menu li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}
 
 
#Menu #en-cours a {color: #bcb9a9;}
 
#Menu #pas-en-cours a {color: #000;}
 
#Menu #pas-en-cours a:hover {color: #bcb9a9;}

Côté javascript pour rendre le menu déroulant compatible IE6 :

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
<script type="text/javascript">
<!--
sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
-->
</script>

[pasc06]

Apparemment IE6 et inférieur ne gère pas les marges de la même manière que IE7 et versions supérieures, Firefox, Chrome, etc.

Il faut donc ajouter une condition dans le fichier html qui permettra d'incorporer 1 fichier CSS différent avec des marges différentes si l'internaute utilise IE6 ou inférieur.

Exemple :

Code :

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

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

Voici les différentes comparaisons possibles :

= (pas de mot-clé);
> (mot-clé gt pour «greater than»);
≥ (mot-clé gte pour «greater than equal»);
< (mot-clé lt pour «less than»);
≤ (mot-clé lte pour «less than equal»).

Quelques exemples :

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
<!--[if gte IE 6]> pour IE 6.0 et version plus récentes <![endif]-->
 
<!--[if IE 5.0]> pour IE 5.0 <![endif]-->
 
<!--[if IE 5.5000]> pour IE 5.5 <![endif]-->
 
<!--[if IE 6]> pour IE 6.0 <![endif]-->
 
<!--[if IE 7]> pour IE 7.0 <![endif]-->
 
<!--[if IE 8]> pour IE 8.0 <![endif]-->
 
<!--[if gte IE 7]> pour IE 7 et supérieur <![endif]-->
 
<!--[if lt IE 7]> pour IE inférieur à IE 7 <![endif]-->
 
<!--[if lte IE 6]> pour IE 5.0, IE 5.5 et IE 6.0 mais pas IE7.0 <![endif]-->

J'avais déjà dans mon fichier html la ligne suivante :

Code :

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

<link href="menu2.css" media="all" rel="stylesheet" type="text/css" />

J'ai donc ajouté cette ligne dans mon fichier html :

Code :

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

<!--[if lte IE 6]> <link href="menuie6.css" media="all" rel="stylesheet" type="text/css" /> <![endif]-->

Avec un fichier "menuie6.css" qui est une copie du fichier "menu2.css" avec des marges différentes pour le sous-menu, qui est chargé seulement dans le cas ou l'internaute utilise IE6 ou inférieur. S'il utilise IE7 ou supérieur, Firefox, Chrome, etc, le fichier "menuie6.css" ne sera pas chargé et c'est le fichier "menu2.css" qui sera actif.

Dans le fichier "menuie6.css", j'ai donc modifié les marges de cette façon :

Code :

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

1
2
3
4
5
6
7
#menu li ul /* Sous-listes */
{ 
position: absolute; /* Position absolue */
width: 70px;
left: -999em; /* Hop, on envoie loin du champ de vision */
margin: -5.5em 0 0 -0.4em;
}

est remplacé par :

Code :

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

1
2
3
4
5
6
7
#menu li ul /* Sous-listes */
{ 
position: absolute; /* Position absolue */
width: 70px;
left: -999em; /* Hop, on envoie loin du champ de vision */
margin: -4.3em 0 0 -6.9em;
}

Heureusement IE7 et supérieur gère les marges de la même façon que Firefox, Chrome, etc. !

J'ai maintenant le même affichage que je sois sous Firefox, IE6, IE7, IE8 ! Le problème de décalage du sous menu sous IE6 est donc résolu !

[pasc06]

Mon menu CSS compatible IE6 est terminé. Finalement plus besoin d'ajouter un fichier CSS particulier pour la compatibilité IE6. Vous trouverez le code complet à cette adresse : http://www.developpez.net/forums/d84...souris-dessus/