decalage dans un menu

**orphen** · 30/10/2007, 13h33

Bonjour à tous.

Apres une longue journée a me faire un menu Dhtml, j'ai eut la mauvaise surprise de constater que j'avais des decalages dans mes sous listes.

Ne trouvant pas le probleme je me tourne vers ce forum qui ma deja bien aider sur d'autres sujets.

Voila l'adresse du menu:

http://fansyl.fr/homepage/index.php

Le rendu sous ie est celui que je voudrais obtenir sous mozilla.

Je me suis inspirer de cette technique :

http://skitime.free-h.org/sdz/tuto_menu.html

Cependant apres avoir ajouter mes images et images precharger je me retrouve avec d'enormes decalage.

Voila mes codes sources

Xhtml

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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!--Menu-->
<ul id="menu">
		<!--Niveau 0-->
        <li>
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('accueil','','../images/general/menu/accueil_hover.jpg',1)"><img src="../images/general/menu/accueil.jpg" alt="Bouton accueil" width="113" height="28"  id="accueil" /></a></li>
       <!--Niveau 0-->
      <li>
 
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tutoriaux','','../images/general/menu/tutoriaux_hover.jpg',1)"><img src="../images/general/menu/tutoriaux.jpg" alt="Bouton tutoriaux" width="113" height="28"  id="tutoriaux" /></a>
		<!--Niveau 1-->
				<ul>
                        <li><a href="#"><img src="../images/general/menu/titre3d.jpg" alt="Titre 3D" width="113" height="28" /></a></li>
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('maya','','../images/general/menu/maya_hover.jpg',1)"><img src="../images/general/menu/maya.jpg" alt="Bouton Maya" width="113" height="28"  id="maya" /></a>
						<!--Niveau 2-->
							<ul>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('interface','','../images/general/menu/interface_hover.jpg',1)"><img src="../images/general/menu/interface.jpg" alt="Bouton interface" width="113" height="28"  id="interface" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('modelisation','','../images/general/menu/modelisation_hover.jpg',1)"><img src="../images/general/menu/modelisation.jpg" alt="Bouton mod&eacute;lisation" width="113" height="28"  id="modelisation" /></a></li>
 
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('texturer','','../images/general/menu/texture_hover.jpg',0)"><img src="../images/general/menu/texture.jpg" alt="Bouton Texturer" width="113" height="28"  id="texturer" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('animer','','../images/general/menu/animer_hover.jpg',1)"><img src="../images/general/menu/animer.jpg" alt="Bouton animer" width="113" height="28"  id="animer" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('dynamique','','../images/general/menu/dynamique_hover.jpg',1)"><img src="../images/general/menu/dynamique.jpg" alt="Bouton Dynamique" width="113" height="28"  id="dynamique" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('eclairage','','../images/general/menu/eclairage_hover.jpg',1)"><img src="../images/general/menu/eclairage.jpg" alt="Bouton Eclairage" width="113" height="28"  id="eclairage" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rendu','','../images/general/menu/rendu_hover.jpg',1)"><img src="../images/general/menu/rendu.jpg" alt="Bouton Rendu" width="113" height="28"  id="rendu" /></a></li>
							</ul>
						</li>
 
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('3dstudiomax','','../images/general/menu/3d_studio_max_hover.jpg',1)"><img src="../images/general/menu/3d_studio_max.jpg" alt="Bouton 3D studio max" width="113" height="28"  id="3dstudiomax" /></a>
						<!--Niveau 2-->
 
							<ul>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('interface','','../images/general/menu/interface_hover.jpg',1)"><img src="../images/general/menu/interface.jpg" alt="Bouton interface" width="113" height="28"  id="interface" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('modelisation','','../images/general/menu/modelisation_hover.jpg',1)"><img src="../images/general/menu/modelisation.jpg" alt="Bouton mod&eacute;lisation" width="113" height="28"  id="modelisation" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('texturer','','../images/general/menu/texture_hover.jpg',0)"><img src="../images/general/menu/texture.jpg" alt="Bouton Texturer" width="113" height="28"  id="texturer" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('animer','','../images/general/menu/animer_hover.jpg',1)"><img src="../images/general/menu/animer.jpg" alt="Bouton animer" width="113" height="28"  id="animer" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('dynamique','','../images/general/menu/dynamique_hover.jpg',1)"><img src="../images/general/menu/dynamique.jpg" alt="Bouton Dynamique" width="113" height="28"  id="dynamique" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('eclairage','','../images/general/menu/eclairage_hover.jpg',1)"><img src="../images/general/menu/eclairage.jpg" alt="Bouton Eclairage" width="113" height="28"  id="eclairage" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rendu','','../images/general/menu/rendu_hover.jpg',1)"><img src="../images/general/menu/rendu.jpg" alt="Bouton Rendu" width="113" height="28"  id="rendu" /></a></li>
							</ul>
 
						</li>
 
                        <li><a href="#"><img src="../images/general/menu/titre2d.jpg" alt="Titre 2D" width="113" height="28" /></a></li>
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Photoshop','','../images/general/menu/photoshop_hover.jpg',1)"><img src="../images/general/menu/photoshop.jpg" alt="Bouton Photoshop" width="113" height="28"  id="Photoshop" /></a>
						<!--Niveau 2-->
							<ul>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('interface','','../images/general/menu/interface_hover.jpg',1)"><img src="../images/general/menu/interface.jpg" alt="Bouton interface" width="113" height="28"  id="interface" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('photographie','','../images/general/menu/photographie_hover.jpg',1)"><img src="../images/general/menu/photographie.jpg" alt="Bouton Photographie" width="113" height="28"  id="photographie" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('webdesign','','../images/general/menu/web_design_hover.jpg',1)"><img src="../images/general/menu/web design.jpg" alt="Bouton Web Design" width="113" height="28"  id="webdesign" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('couleur','','../images/general/menu/couleur_hover.jpg',1)"><img src="../images/general/menu/couleur.jpg" alt="Bouton Couleur" width="113" height="28"  id="couleur" /></a></li>
 
							</ul>
						</li>
 
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('illustrator','','../images/general/menu/illustrator_hover.jpg',1)"><img src="../images/general/menu/illustrator.jpg" alt="Bouton Illustrator" width="113" height="28"  id="illustrator" /></a>
						<!--Niveau 2-->
							<ul>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('interface','','../images/general/menu/interface_hover.jpg',1)"><img src="../images/general/menu/interface.jpg" alt="Bouton interface" width="113" height="28"  id="interface" /></a></li>
							</ul>
						</li>
 
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('painter','','../images/general/menu/painter_hover.jpg',1)"><img src="../images/general/menu/painter.jpg" alt="Bouton Painter" width="113" height="28"  id="painter" /></a>
 
						<!--Niveau 2-->
							<ul>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('interface','','../images/general/menu/interface_hover.jpg',1)"><img src="../images/general/menu/interface.jpg" alt="Bouton interface" width="113" height="28"  id="interface" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('dessin_num','','../images/general/menu/dessin_num_hover.jpg',1)"><img src="../images/general/menu/dessin_num.jpg" alt="Bouton dessin num&eacute;rique" width="113" height="28"  id="dessin_num" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('peinture_num','','../images/general/menu/peinture_num_hover.jpg',1)"><img src="../images/general/menu/peinture_num.jpg" alt="Bouton Peinture Num&eacute;rique" width="113" height="28"  id="peinture_num" /></a></li>
							</ul>
						</li>
 
						<li><a href="#"><img src="../images/general/menu/titre_compositing.jpg" alt="Titre Compositing" width="113" height="28" /></a></li>
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('combustion','','../images/general/menu/combustion_hover.jpg',1)"><img src="../images/general/menu/combustion.jpg" alt="Bouton Combustion" width="113" height="28"  id="combustion" /></a>
 
						<!--Niveau 2-->
							<ul>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('interface','','../images/general/menu/interface_hover.jpg',1)"><img src="../images/general/menu/interface.jpg" alt="Bouton interface" width="113" height="28"  id="interface" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tracking','','../images/general/menu/tracking_hover.jpg',1)"><img src="../images/general/menu/tracking.jpg" alt="Bouton Tracking" width="113" height="28"  id="tracking" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('effet_speciaux','','../images/general/menu/effets_hover.jpg',1)"><img src="../images/general/menu/effets.jpg" alt="Bouton Effet sp&eacute;ciaux" width="113" height="28"  id="effet_speciaux" /></a></li>
							</ul>
						</li>
						<!--Niveau 1-->
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('internet','','../images/general/menu/internet_hover.jpg',1)"><img src="../images/general/menu/internet.jpg" alt="Bouton Internet" width="113" height="28"  id="internet" /></a>
 
							<!--Niveau 2-->
							<ul>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('dreamweaver','','../images/general/menu/dreamweaver_hover.jpg',1)"><img src="../images/general/menu/dreamweaver.jpg" alt="Bouton Dreamweaver" width="113" height="28"  id="dreamweaver" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('html','','../images/general/menu/html_hover.jpg',1)"><img src="../images/general/menu/html.jpg" alt="Bouton HTML" width="113" height="28"  id="html" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('css','','../images/general/menu/css_hover.jpg',1)"><img src="../images/general/menu/css.jpg" alt="Bouton CSS" width="113" height="28"  id="css" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('javascript','','../images/general/menu/javascript_hover.jpg',1)"><img src="../images/general/menu/javascript.jpg" alt="Bouton Javascript" width="113" height="28"  id="javascript" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('php','','../images/general/menu/php_hover.jpg',1)"><img src="../images/general/menu/php.jpg" alt="Bouton PHP" width="113" height="28"  id="php" /></a></li>								
					</ul>
						</li>
 
						<!--Niveau 1-->
								<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('dessin','','../images/general/menu/dessin_hover.jpg',1)"><img src="../images/general/menu/dessin.jpg" alt="Bouton Dessin/Peinture" width="113" height="28"  id="dessin" /></a>
									<ul>
										<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('perspective','','../images/general/menu/perspective_hover.jpg',1)"><img src="../images/general/menu/perspective.jpg" alt="Bouton Persp&eacute;ctive" width="113" height="28"  id="perspective" /></a></li>
										<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('croquis','','../images/general/menu/croquis_hover.jpg',1)"><img src="../images/general/menu/croquis.jpg" alt="Bouton Croquis" width="113" height="28"  id="croquis" /></a></li>
										<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('couleur','','../images/general/menu/couleur_hover.jpg',1)"><img src="../images/general/menu/couleur.jpg" alt="Bouton Couleurs" width="113" height="28"  id="couleur" /></a></li>
										<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aquarelle','','../images/general/menu/aquarelle_hover.jpg',1)"><img src="../images/general/menu/aquarelle.jpg" alt="Bouton Aquarelle" width="113" height="28"  id="aquarelle" /></a></li>
										<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gouache','','../images/general/menu/gouache_hover.jpg',1)"><img src="../images/general/menu/gouache.jpg" alt="Bouton Gouache" width="113" height="28"  id="gouache" /></a></li>							
									</ul>	
								</li>
 
				<!--Niveau 1-->
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('photographie','','../images/general/menu/photographie_hover.jpg',1)"><img src="../images/general/menu/photographie.jpg" alt="Bouton Photographie" width="113" height="28"  id="photographie" /></a></li>
                </ul>
    </li>
       <!--Niveau 0-->
        <li>
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projets','','../images/general/menu/projets_hover.jpg',0)"><img src="../images/general/menu/projets.jpg" alt="Bouton projets" width="113" height="28"  id="projets" /></a>
		  <!--Niveau 1-->
				<ul>
 
                        <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inscription','','../images/general/menu/inscription_hover.jpg',1)"><img src="../images/general/menu/inscription.jpg" alt="Bouton Inscription" width="113" height="28"  id="inscription" /></a></li>
                        <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projet_heberge','','../images/general/menu/herberge_hover.jpg',1)"><img src="../images/general/menu/heberge.jpg" alt="Boutons H&eacute;berg&eacute;s" width="113" height="28"  id="projet_heberge" /></a></li>
                </ul>
        </li>
       <!--Niveau 0-->
        <li>
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('formations','','../images/general/menu/formations_hover.jpg',1)"><img src="../images/general/menu/formations.jpg" alt="Bouton formations" width="113" height="28"  id="formations" /></a>
		  <!--Niveau 1-->
				<ul>
 
                        <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('form_3d','','../images/general/menu/form_3d_hover.jpg',1)"><img src="../images/general/menu/form_3d.jpg" alt="Bouton 3D" width="113" height="28"  id="form_3d" /></a>
						<!--Niveau 2-->
							<ul>
                        			<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inscription','','../images/general/menu/inscription_hover.jpg',1)"><img src="../images/general/menu/inscription.jpg" alt="Bouton Inscription" width="113" height="28"  id="inscription" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('calendrier','','../images/general/menu/calendrier_hover.jpg',1)"><img src="../images/general/menu/calendrier.jpg" alt="Bouton Calendrier" width="113" height="28"  id="calendrier" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('archive','','../images/general/menu/archive_hover.jpg',1)"><img src="../images/general/menu/archive.jpg" alt="Bouton Archive" width="113" height="28"  id="archive" /></a></li>						
							</ul>
						</li>
                        <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Form_2D','','../images/general/menu/form_2d_hover.jpg',1)"><img src="../images/general/menu/form_2d.jpg" alt="Bouton 2D" width="113" height="28"  id="Form_2D" /></a>
 
						<!--Niveau 2-->
						<ul>
                        			<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inscription','','../images/general/menu/inscription_hover.jpg',1)"><img src="../images/general/menu/inscription.jpg" alt="Bouton Inscription" width="113" height="28"  id="inscription" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('calendrier','','../images/general/menu/calendrier_hover.jpg',1)"><img src="../images/general/menu/calendrier.jpg" alt="Bouton Calendrier" width="113" height="28"  id="calendrier" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('archive','','../images/general/menu/archive_hover.jpg',1)"><img src="../images/general/menu/archive.jpg" alt="Bouton Archive" width="113" height="28"  id="archive" /></a></li>						
						</ul>
						</li>
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('form_compositing','','../images/general/menu/form_compo_hover.jpg',1)"><img src="../images/general/menu/form_compo.jpg" alt="Bouton Compositing" width="113" height="28"  id="form_compositing" /></a>
						<!--Niveau 2-->
 
						<ul>
                        			<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inscription','','../images/general/menu/inscription_hover.jpg',1)"><img src="../images/general/menu/inscription.jpg" alt="Bouton Inscription" width="113" height="28"  id="inscription" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('calendrier','','../images/general/menu/calendrier_hover.jpg',1)"><img src="../images/general/menu/calendrier.jpg" alt="Bouton Calendrier" width="113" height="28"  id="calendrier" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('archive','','../images/general/menu/archive_hover.jpg',1)"><img src="../images/general/menu/archive.jpg" alt="Bouton Archive" width="113" height="28"  id="archive" /></a></li>						
							</ul>
						</li>
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('form_internet','','../images/general/menu/form_internet_hover.jpg',1)"><img src="../images/general/menu/form_internet.jpg" alt="Bouton Internet" width="113" height="28"  id="form_internet" /></a>
						<!--Niveau 2-->
						<ul>
 
                        			<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inscription','','../images/general/menu/inscription_hover.jpg',1)"><img src="../images/general/menu/inscription.jpg" alt="Bouton Inscription" width="113" height="28"  id="inscription" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('calendrier','','../images/general/menu/calendrier_hover.jpg',1)"><img src="../images/general/menu/calendrier.jpg" alt="Bouton Calendrier" width="113" height="28"  id="calendrier" /></a></li>
									<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('archive','','../images/general/menu/archive_hover.jpg',1)"><img src="../images/general/menu/archive.jpg" alt="Bouton Archive" width="113" height="28"  id="archive" /></a></li>						
						</ul>
						</li>
                </ul>
        </li>
       <!--Niveau 0-->
        <li>
 
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('societe','','../images/general/menu/societe_hover.jpg',1)"><img src="../images/general/menu/societe.jpg" alt="La soci&eacute;t&eacute;" width="113" height="28"  id="societe" /></a>
		  <!--Niveau 1-->
				<ul>
                        <li><a href="#">Fansyl</a></li>
                        <li><a href="#">L'&eacute;quipe</a></li>
						<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('form_galerie','','../images/general/menu/form_galerie_hover.jpg',1)"><img src="../images/general/menu/form_galeries.jpg" alt="Bouton Galeries" width="113" height="28"  id="form_galerie" /></a>
						<!--Niveau 2-->
 
						<ul>
									<li><a href="#">3D</a></li>
									<li><a href="#">2D</a></li>
									<li><a href="#">Internet</a></li>						
							</ul>
						</li>
                </ul>
        </li>
 
		<!--Niveau 0-->
		 <li>
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('liens','','../images/general/menu/liens_hover.jpg',1)"><img src="../images/general/menu/liens.jpg" alt="Bouton liens" width="113" height="28"  id="liens" /></a>
		   <!--Niveau 1-->
				<ul>
                        <li><a href="#">Fansyl</a></li>
                        <li><a href="#">Partenaires</a></li>
                </ul>
 
        </li>
		<!--Niveau 0-->
		<li>
                <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../images/general/menu/contact_hover.jpg',1)"><img src="../images/general/menu/contact.jpg" alt="Bouton contact" width="113" height="28"  id="Contact" /></a> </li>
</ul>

Mon code 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
/* CSS Document */
 
/*Menu*/
 
#menu, #menu ul{ /*Le menu*/
		width: 798px;
		margin-left: auto;
   		margin-right: auto;
		margin-top : -5px; 
        padding : 0px; 
        list-style : none;
}
 
#menu a{  /* Contenu des listes */
        display : block; /* les liens deviennent type block */
        padding : 0;
		margin: 0;
}
 
#menu li{  /* Elements des listes */     
        float : left;
        border-right : 1px solid #737373; /* bordure grise */
}
 
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li{
        border-right: 1px solid #737373 ;
}
 
#menu li ul{ /* Sous-listes */
		margin-top:0px;
        position: absolute; 
        width: 144px; /* Largeur sous-listes */
        left: -999em; 
}
 
#menu li ul ul
{
        margin    : -28px 0 0 115px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
        border-left     : 1px solid #737373 ; /* Petite bordure à gauche pour ne pas coller ... */     
}
 
/* ie ne reconnaissant pas le sélecteur */
html>body #menu li ul ul               
{
        border-left     : 1px solid #737373 ; 
}
 
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

Et mon javascript

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
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);

Merci à tous ceux qui pourront m'aider

Ps: certain liens n'ont pas d'images (bug de transfert)

**mael94420** · 30/10/2007, 18h10

Ce que je peut te dire, c'est que lorsque tu code en xhtml comme c'est ton cas, il ne faut pas tester sous IE, ce navigateur quelque soit sa version ne respecte pas les normes W3C. Tu devrait dabord développer ton site sou Firefox en t'aidant du formidable plugin FireBug qui te guidera pour le codage de tes css.
En revanche, tous n'est pas perdu. Garde ta CSS de coté, tu l'appelera pour IE grace au hack :

Code :

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

1
2
3
4
5
<link href="page.css" rel="stylesheet" type="text/css" />
 
<!--[if lte IE 6]>
   <link href=page_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

il te faut donc reprendre ta css et la rendrecompatible W3C. Je te l'accorde, il est defois plus simple de coder pour IE mais bon.

**orphen** · 30/10/2007, 18h48

Euh je pense que chacun a ses methode de travail.
Je prefere corriger les bugs quand ils arrivent.

Le but est la parfaite compatibilitée de mon site tous navigateurs.

Et mes pages seront valider xhtml j'ai juste un soucis que je corrigerai des que quelqu'un serra en mesure de me guider sur mon soucis actuel.

Merci de tes conseils en tous cas.

**mael94420** · 30/10/2007, 23h25

Je comprend très bien que tu veuille garder ta methode de travail. Je dit juste que en réalité, lorsque tu joue avec les css, il est primordiales de faire fonctionner ta feuille de style sur un navigateur compatible W3C. Ces navigateurs sont heureusements les plus nombreux sur le "marché". c'est pourquoi, je te dit de garder ton code css pour IE.
Selon moi, ce type de développement demande necessairement 2 feuille de styles distincts. Une pour les navigateur compatible et une autre pour IE.

C'est une methode de travail qui t'évitera bien des déboires car en commencant par rendre ta page compatible pour IE, tu ne te retrouvera pas avec le meme résultat sur un firefox et sur un opera. Alors que si tu code pour Opera disont, ton résultat sera le meme pour firefox, safari... et il ne te restera plus qu'a coder pour IE.

Sinon, une autre question, Sur ta page, as tu mis le DOCTYPE ? si non, met le et voi si IE passe toujours correctement.

**orphen** · 31/10/2007, 10h18

A la base je code pour firefox.

C'est un hasard que mon menu fonctionne bien sous ie.

Quand aux histoires de validation W3C Ile me semble que ce qu'il met vraiment la zone ce sont les valeurs par default des differents navigateurs (qui sont variable d'un navigateur a l'autre).

Ie a surtous des problemes pour comprendre certains styles.
Et en comprend d'autre que mozilla ne comprend pas non plus.

Mais je ne pense pas qu'on puisse dire qu'il n'est pas valide W3C.

Apres tous le monde a son propre avis ^^.

Sinon personne pour m'aider a comprendre mon decalage dans mon menu svp?
(menu qui etai compatible tous navigateurs et tous os avant que je mettent mes images)

merci encor

**Candygirl** · 31/10/2007, 10h48

Envoyé par orphen

(menu qui etai compatible tous navigateurs et tous os avant que je mettent mes images)

Dans ce cas un petit display:block attribué à tes images pourrait bien résoudre le problème.

**orphen** · 31/10/2007, 11h16

merci Candygirl je tenterai mais ça m'etonnerai que cela vienne de ça car mes images sont attribuer dans chaque <li> qui ont eux meme un display block.

Je tente ce soir en rentrant du boulot

decalage dans un menu

Positionnement en CSS

Discussions similaires

Partager

Partager