Discussion :

[fabight]

Bonjour,

Etant débutant niveau css et me devant de corriger un bug d'affichage afin d'avoir une totale compatibilité entre les différents navigateurs utlisés, je me retrouve avec un problème d'affichage au niveau de mon menu et ce, uniquement sur IE6.

En effet, lorsque l'on souhaite afficher le sous-menu du premier élément de mon menu, celui-ci se retrouve littéralement décallé sur la gauche (le hover par contre marche). Le fond du premier élément de mon menu ne fonctionne pas correctement lui aussi et le problème part surement de là.

Ce problème n'intervient que pour le premier élement de mon menu, les autres fonctionnant correctement.

Voici les bouts de code associés :

Les appels dans le fichier php niveau css se font de la sorte :
<div id="menu">
<ul id="nav" >
<li> etc...

Maintenant les références css:

Pour l'affichage du menu :

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
body { 
behavior:url("csshover2.htc"); 
}
#menu{
position:absolute;
/margin-top:150px;
-margin-top:150px;
/margin-left:682px;
-margin-left:341px;
width:125px;
height:150px;
font-style:normal;
font-family:Arial;
font-size:15px;
text-align:left;
color:#ffffff;
}

Pour les éléments du menu:

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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
#nav, #nav ul {
	float: left;
	width: 198px;
	list-style: none;
	padding: 0;
	margin: 0 0 0em 0;
	font-family:Arial;
    font-size:13px;
    text-align:left;
}
 
#nav a {
	display: block;
	width: 10em;
	color: #ffffff;
	text-decoration: none;
	padding: 0.00em 0.2em;
}
 
 
#nav li {
	padding-right: 1em;
	margin-top:-2px;
	width: 120px;
	height:16px;
	font-family:Arial;
    font-size:13px;
	font-weight:normal;
    text-align:left;
	border-top:0px solid #574d1e;
	border-bottom:0px solid #574d1e;
	background-color:#574d1e;
 
}
 
#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 100px;
	font-weight: normal;
	border-width: 0.25em;
	margin-left: 120px;
	margin-top:-16px;
	font-family:Arial;
    font-size:13px;
	font-weight:normal;
    text-align:left;
	background-color:#574d1e;
	z-index: 2;
}
 
#nav li li {
	padding-right: 1em;
	width: 98px;
	font-family:Arial;
    font-size:13px;
	height:16px;
	margin-top:-1px;
	font-weight:normal;
    text-align:left;
	border-top:1px solid #574d1e;
	border-bottom:1px solid #574d1e;
	background-color:#574d1e;
}
 
#nav li ul a {
	color: #ffffff;
	width: 13em;
	font-weight:normal;
	font-family:Arial;
    font-size:13px;
    text-align:left;
}
 
 
#nav li:hover ul ul, #nav li:hover ul ul ul{
	left: -999em;
}
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}
 
#nav li:hover, #nav li.sfhover{
	background: #be1881;
}
#nav li.visited ul{
	left: auto;
	z-index: 1;
	height:17px;
 
}
#nav li.visited{
	background: #be1881;
 
}
 
#content {
	clear: left;
}
 
#content a {
	color: #7C6240;
}
 
#content a:hover {
	text-decoration: none;
}
#titremenucentre {
width: 520px;
height:15px;
background-color:#be1881;
margin-bottom:10px;
 
padding-left:5px;
font-family:Arial;
font-size:12px;
padding-top:0px;
color:#ffffff;
text-decoration: none;
}
#titremenucentrer {
width: 520px;
height:15px;
background-color:#be1881;
margin-bottom:-25px;
margin-top:10px;
padding-left:5px;
font-family:Arial;
font-size:12px;
padding-top:0px;
color:#ffffff;
text-decoration: none;
}

Voilà, j'ai pas mal cherché, mais je ne sais pas du tout d'où ça vient et mes connaissances css sont plutot limitées, ce qui n'aide pas !


Vous pouvez voir directement mon probleme sur cette adresse : http://www.lebbb.org/article2.php?id...=1&idsection=1 [Sous IE6 bien entendu]


Comme vous pourrez le voir, j'ai également un problème au niveau des fichiers .png malgré l'application du correctif pour IE6 mais c'est un autre problème.

Merci d'avance !

Si vous avez besoin de plus de code, ou si vous n'avez comprit quelque chose n'hésitez pas.

[Er3van]

Sur ce site il y a une gallerie CSS avec pleins de menus tout beau tout plein !


Développez un menu en CSS c'est souvent gallère, autant ne pas réinventer la roue à chaque fois, surtout quand il n'y en n'a pas l'utilité.

[micker]

la le problème c'est que le menu fait est operationel sous ie7 et ff
mais sous ie6 la premiere ligne de chaque menu bug avec ce probleme de css ...
l'idée étant bien sur de ne pas tout refaire !
Merci pour ton aide