decalage sous-menu dans ie7 et ie<7

**ninon** · 11/10/2010, 13h39

Bonjour,

J'ai créé un site pour présenter mon parcours professionnel.
Le voici : http://cevisa.tobehost.net

Le menu horizontal déroulant passe très bien sous internet explorer 8, mozilla, safari, opera, et chrome.

Mais sur les versions précédentes de ie7 (j'utilise ieTester), un décalage des sous-menus au survol du menu principal fiche tout par terre !

Je cherche depuis 2 jours sur les forum sans succès, vous avez peut-être une idée ?

En plus de l'URL du site je joins le css qui correspond au menu déroulant.

Mon DocType est le suivant :

Code :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Merci !

**polymorphisme** · 12/10/2010, 08h10

Bonjour ninon,

sans plus de détails, il y a peu de chance que quelqu'un se penche sur le problème. Tu devrait donner un extrait de code, la localisation précise de ton soucis.

**ninon** · 12/10/2010, 13h07

Autant pour moi ! voici des extraits du code html et du css et je vous livre le javascript que trouvé sur le net et que j'ai souvent utilisé, sans souci de compatibilité ie7 ou inf.

la page index.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
18
19
20
21
22
23
24
25
26
 
<!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" lang="fr">
<head>
	<title>Isabelle YVON - 12/10/2010</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="extrait.css" type="text/css" />
	<script type="text/javascript" language="JavaScript" src="menu.js"></script>
</head>
<body>                               
<div id="container">
	<div id="pageHeader">	
		<script type="text/javascript" language="JavaScript">generation("menu.html");</script>
	</div>
 
	<div id="pageContenu">
	<br/><br/><br/><br/><br/>
	<br/><br/><br/><br/><br/>
	<br/><br/><br/><br/><br/>
	</div>
 
</div>
<div id="basdepage"></div>
 
</body>
</html>

le javascript

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
 
//au chargement de la page, on appelle la fonction montre()
window.onload=montre;
 
//affichage du menu déroulant et placement de ce dernier
function montre(id,affiche)
{
	var d = document.getElementById(id);
	//si on quitte un élément du menu
	if (d && !affiche) 
	{
		d.style.display='none'; //on l'efface
		var c=d.parentNode; //son parent
		c.style.color='#666699';
		if (c.parentNode.parentNode.parentNode.tagName!='DIV')  //si c'est un sous-menu, on rend à son parent les couleurs d'origine
		{
			c.firstChild.style.color='#393c33';
		}
	}
	//sinon si on se mets sur un élément du menu
	else if (d && affiche)
	{ 
		d.style.display='block'; //on l'affiche
		var c=d.parentNode; //son parent
		c.style.color='#996666';
		if (c.parentNode.parentNode.parentNode.tagName!='DIV') //si c'est un sous-menu, on donne à son parent les couleurs de survol
		{
			c.firstChild.style.color='#fff';
			c.firstChild.style.background='#666699';
		}
	}
}
 
function generation(menuLoc) {
var maRequete=null;
var monMenu="";
 
if(window.XMLHttpRequest) {       // Firefox 
maRequete= new XMLHttpRequest();
}
if(window.ActiveXObject)  {  // Internet Explorer 
maRequete= new ActiveXObject("Microsoft.XMLHTTP");
}
 
if(window.XMLHttpRequest) {       // Firefox 
}
else if(window.ActiveXObject)  {  // Internet Explorer 
}
else {                            // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
} 
 
maRequete.open("GET", menuLoc, false); // lecture du fichier contenant le menu
 
maRequete.send(null);
monMenu = maRequete.responseText;
document.write(monMenu);
 
return;
}

et le css (en pièce jointe du 1er message)

**ninon** · 12/10/2010, 13h12

En fait mon extrait css complet est le suivant

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
html {	margin: 0px;	padding: 0px;	height: 100%;	width: 100%;	}
body {
	margin: 0px;
	padding: 0px;
	font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	height: 100%;
	width: 100%;
	background-repeat: repeat-x;
	background-position: top;
	background-color: #F0ECD6;
}
 
a:link {
	color: #993300;
	text-decoration: none;
	outline:none;	
}
a:visited {
	color: #999900;
	text-decoration: none;
	outline:none;	
}
a:hover, a:active {
	color: #993300;
	text-decoration: none;
	outline:none;	
}
 
ul, li {
  list-style-type:none; 
}
 
#container {
	position: relative;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	background-repeat: no-repeat;
	background-position: right top;
	z-index: 2;	
}	
 
#pageHeader {
	position: fixed;
	height: 40px;
	width: 800px;
	background-color: #fff;
	z-index: 6;
}
 
#pageContenu {
	margin-top: 0px;
	width: 800px;
	background-image: url(87.png);
	background-repeat: repeat;
	background-position: bottom;
	padding-bottom: 150px;
	margin-bottom: 50px;	
}
 
#sommi li{
width:60px;
}
 
#reali li{
width:140px;
}
 
#menu {
background-color:#fff;
width:100%;
height:22px;
}
 
#menu ul li {
position:relative;
padding:0 7px 0 7px;
color:#666699;
float:left;
cursor:pointer;
height:22px;
}
 
#menu ul li ul {
background-color:#fff;
padding:7px 3px 3px 3px;
display:none;
position:absolute;
	opacity:0.7;
    -moz-opacity : 0.7;
    -ms-filter: "alpha(opacity=70)";
}
 
#menu ul li ul li {
height:100%;
font-weight:bold;
}
 
#menu ul li ul li a {
color:#006600;
padding: 3px 3px 3px 10px;
font-weight:bold;
font-size:12px;
display:block;
height:100%;
border-width:1px;
border-style:solid;
}
 
#menu ul li ul li a:hover {
background-color:#006600;
color:#fff;
}

Je n'ai laissé que deux sous-menu, on voit bien le décalage sous ie7 et le probleme qu'il pose.

**ninon** · 17/10/2010, 15h40

J'ai fini par trouver une solution ici :
http://www.css-faciles.com/menu-deroulant.php
plus particulierement au paragraphe "comment rendre le code compatible avec IE6"

A present, mon menu fonctionne sans javascript, sauf pour les versions IE < 8 !

decalage sous-menu dans ie7 et ie<7

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager