Discussion :

[baggie]

Bonjour

Je suis actuellement en plein développement d'un site et j'en suis au niveau de la compatibilité entre les différents navigateurs. J'ai eu plusieurs problèmes sous IE et j'en ai réglé la plupart, mais là je bloque. (pour info je suis sous IE8)

J'ai un menu créé avec trois divs : une image de gauche, un div avec les liens qui s'affichent, et une image de droite.

Sur ma page d'accueil, je n'ai pas de header, j'ai directement le menu : mes 3 divs s'affichent correctement (image A sur le screen ci-joint).

Sur une seconde page où là j'ai un header (2 images), l'image de gauche de mon menu saute et vient se mettre dans le header (image B sur le screen ci-joint).

Sur une troisième page, où j'ai exactement le même header que sur ma seconde page, l'image de gauche vient se caler en haut à droite de mon header.

Ce qui diffère entre la seconde et la troisième page : ce qu'il y a dans le contenu, dans un div se trouvant après mon menu.

Voici mon code HTML (pour 2ème et 3ème page) :

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
 
<div id="wrapper" class="center_content">
	<!-- header -->
	<div class="header">
		<div id="bandeau">
			<div class="img_truc"><img src="images/logo_truc.gif" /></div>
			<div class="main_img"><img src="images/photo_top01.png" /></div>
		</div>
		<div style="clear: both;"></div>
		<div id="left_header_menu"></div>
		<div id="header_menu">
			<div><a href="..."><img src="images/boff.png" id="button_ho" /></a></div>
			<div class="main_menu">
				<ul>
					<li>lien</li>
					<li>lien</li>
					<li>lien</li>
				</ul>
			</div>
			<div class="secondary_menu">
				<ul>
					<li>lien</li>
					<li>lien</li>
				</ul>
			</div>
		</div>
		<div id="right_header_menu"></div>
	</div>
	<div style="clear: both;"></div>
	<!-- Fin header -->
	<div id="content" class="inside">
...

Ma 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
 
#wrapper {
	width: 900px;
	margin: 0 auto;
	margin-top: 40px;
}
 
.header div, .header_actus div {
	float: left;
}
 
/* Header */
#bandeau {
	height: 196px;
}
 
.img_truc {
	margin-left: 45px !important;
}
 
#left_header_menu {
	background: url('images/menu_top_left.png') no-repeat;
	width: 17px;
	height: 35px;
}
 
#header_menu {	
	background: url('images/menu_top_center01.png') repeat-x;
	height: 28px;
	width: 856px;
	padding-top: 8px;
}
 
#right_header_menu {
	background: url('images/menu_top_right.png') no-repeat;
	width: 19px;
	height: 35px;
}

C'est donc au niveau de #left_header_menu (n°3 sur l'image) que j'ai un problème, enfin c'est ce div qui a un comportement que je ne comprends pas.

Normalement, sur chaque page, je devrais avoir ce qu'il y a d'illustré sur la figure A pour le menu.

Je ne comprends pas bien ce qui pose problème

Donc un peu d'aide serait la bienvenue, merci