menu css : positionnement inatendu sous IE6
Bonjour à tous,
Pour arriver à un bon référencement d'un site je cherche à faire un menu tout HTML et CSS.
Les débuts ne sont pas si mauvais sauf sous IE6 bien sûr que l'on n'a pas encore totalement éradiqué...
Le positionnement de mes sous menus semble bon dans FF et IE7 mais dans IE6 ils se baladent trés loin à gauche de l'écran...
Cela peut-il se corriger ?
Voici le code :
Code:
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
| <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>menu en css</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<script type="text/javascript">
// Fonction destinée à remplacer le "LI:hover" pour IE 6
sfHover = function() {
var sfEls = document.getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
this.className += " sfhover";
}
sfEls[i].onmouseout = function() {
this.className = this.className.replace(new RegExp(" sfhover"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
</head>
<body>
<ul style="position:relative">
<li class="main-menu-item">
<img src="images/menu/menu_gche.gif" />
</li>
<li id="li-bureaux" class="main-menu-item">
<a href=""><img id="main-menu-img-bureaux" class="main-menu-img" src="images/menu/menu_bureaux.gif" /></a>
<ul id="ul-bureaux-2" class="ul-niveau-2">
<li class="sub-menu-item">item1</li>
<li class="sub-menu-item">item2</li>
<li class="sub-menu-item">item3</li>
</ul>
</li>
<li id="li-sejour" class="main-menu-item">
<a href=""><img class="main-menu-img" src="images/menu/menu_sejours.gif" /></a>
<ul id="ul-sejour-2" class="ul-niveau-2">
<li class="sub-menu-item">item1</li>
<li class="sub-menu-item">item2</li>
<li class="sub-menu-item">item3</li>
</ul>
</li>
<li id="li-activite" class="main-menu-item">
<a href=""><img class="main-menu-img" src="images/menu/menu_activites.gif" /></a>
<ul id="ul-activite-2" class="ul-niveau-2">
<li class="sub-menu-item">item1</li>
<li class="sub-menu-item">item2</li>
<li class="sub-menu-item">item3</li>
</ul>
</li>
<li class="main-menu-item">
<a href=""><img class="main-menu-img" src="images/menu/menu_carte.gif" /></a>
</li>
<li class="main-menu-item">
<a href=""><img class="main-menu-img" src="images/menu/menu_enfants.gif" /></a>
</li>
<li class="main-menu-item">
<img src="images/menu/menu_dte.gif" />
</li>
</ul>
</body>
</html> |
Code:
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
| .main-menu-item{
float:left;
height:31px;
overflow:hidden;
}
li{
list-style-type:none;
text-align:center
}
ul ul{
position:absolute;
display:none;
}
ul ul li:hover{
background-color:#CC9966;
}
li:hover ul.ul-niveau-2, li.sfhover ul.ul-niveau-2{
display:block;
}
.sub-menu-item{
border:#999999 thin solid;
height:25px
}
.main-menu-img{
border:none;
}
.ul-niveau-2 li{
width:100px
}
#ul-sejour-2{
top:31px;
left:233px;
}
#ul-activite-2{
top:31px;
left:313px;
}
#ul-bureaux-2{
top:31px;
left:146px;
} |
Cela vient-il de mon positionnement float:left pour la class main-menu-item ?
Si oui par quoi puis-je le remplacer ?
Toutes vos idées seront les bienvenues... sauf de me dire de laisser tomber IE6 :-(
Merci d'avance pour vos réponses.
