Firefox OK, Internet Explorer KO !

**Thoumai** · 09/02/2008, 02h45

Bonsoir (bonjour ?

) à tous pour mon premier message sur le forum !

Je crée en ce moment mon premier site web pour un ami, ce qui me permet de m'entrainer étant (vous l'aurez compris) débutant.

Ca avance petit à petit mais j'ai fait une erreur, ce qui est construit du site à été fait entièrement sous firefox or en le regardant par hasard avec IE, me suis aperçu que ca donnait pas du tout le même résultat

Les blocs, notemment, ne s'affiche pas de la même manière.

Je retiendrait la lecon, en attendant, la structure générale du site est incomplète, mais tout de même construite et j'ai un peu la flemme de tout reprendre à zéro, aussi si quelqu'un peut m'indiquer quoi modifier concrètement pour rectifier le problème, ça m'aiderais beaucoup et par la suite, je n'oublierais pas de tester ça régulièrement.

Voici le lien vers mon site

EDIT : Le fichier index.php ( qui as la meme structure que toutes les autres pages: la bannière en haut, les menus sur chaque coté, une bande en bas et le contenu de la page au milieu ) et le fichier css ( appelé pour cette structure sur toutes les pages aussi ) sont en fichiers attachés.

Merci d'avance.

**Erwan31** · 09/02/2008, 13h51

Bonjour,
d'une part tu dois indiquer sur quelle version d'IE l'affichage pause problème
et d'autre part il faut être plus précis sur les différences d'affichage que tu aimerais résoudre.

**Thoumai** · 09/02/2008, 14h10

Merci de ta réponse.

Je l'ai regardé avec internet explorer 6.0, et le principal problème au niveau de l'affichage :

- Les deux blocs avec les menus se trouvent normalement ( avec firefox ) respectivement à gauche et a droite de l'écran et restent fixe alors que sous IE, non seulement ils ne restent pas fixe mais ils se mettent l'un en dessous de l'autre, tous deux du coté gauche.

EDIT : Les captures d'écrans :

Sous firefox

Sous IE 6.0

**Thoumai** · 09/02/2008, 18h00

Bon...J'ai commencer à résoudre le problème en virant fixed et en le remplacent par absolute pour les menus et en modifiant la valeur du top en position relative pour le bas de la page. C'est pas encore ca mais c'est mieux

:

Résultat

Mais même si le menu de droite est bien à droite, il est pas bien placé et surtout, il est toujours pas fixe, est-ce possible de faire en sorte qu'il reste fixe même pour internet explorer ?

Je continue à chercher...en attendant, j'attends toujours vos conseils, n'hésitez pas svp !

**Thoumai** · 12/02/2008, 13h57

Bonjour, après quelques recherches, j'ai résolu une bonne parti des problèmes de positionnement sur internet explorer 6.0 comme vous pouvez le voir:

Firefox:

Internet explorer 6.0:

Il reste à régler :

1.L'apparence de la bordure des images qui servent de liens dans les menus

2.Et surtout la taille des "div" "menus_droit" et menus_gauche" encadrant ces images de chaque coté de la page. La largeur se règle sans problème mais ( sur IE toujours ), la hauteur en pourcentage ne fonctionne pas et j'ai essayé en pixels, ca as fait descendre la deuxième image ( comme si elle n'était pas dans le bloc ? )

Code 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
<!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" xml:lang="fr" >
		<head>
            <title>Bienvenue sur le site officiel de Mc JiminiKee</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
			<meta http-equiv="Content-Style-Type" content="text/css" />
 
			<?php
 
			if (preg_match("#MSIE#", $_SERVER['HTTP_USER_AGENT']))
			{ ?>
			<link rel="stylesheet" media="screen" type="text/css" href="CSS/structure_ie.css" />
			<?php } 
			else 
			{ ?>
			<link rel="stylesheet" media="screen" type="text/css" href="CSS/structure.css" />
			<?php } 
 
			?>
 
			<style type="text/css">
			p
			{
				text-align: center;
				font-style: italic;
			}
			</style>
		</head>
			<body>
 
				<div class="haut_de_page">
					<div class="banniere_jiminikee_mc">
					</div>
				</div>
 
 
					<div class="menus_droit">
						<ul class="sound"> 
						<li> <a href="sound.php"> <img src="menus/sound.gif" class="image_menu_sound" alt="Les titres de MC jiminikee" /> </a> </li>
						</ul>
						<ul class="photos">
						<li> <a href="photos.php"> <img src="menus/photos.gif" class="image_menu_photos" alt="Les photos de MC jiminikee" /> </a> </li>
						</ul>
					</div>
 
 
						<div id="contenu">
 
							<p>LE SITE EST ENCORE EN CONSTRUCTION, LES PAGES COMPLETES NE SONT PAS DEFINITIVES</p>
 
						</div>	 
 
 
					<div class="menus_gauche">
						<ul class="bio">
						<li> <a href="bio.php"> <img src="menus/bio.gif" class="image_menu_bio" alt="La bio de MC JiminiKee" /> </a> </li> 
						</ul>
						<ul class="contact">
						<li> <a href="contact.php"> <img src="menus/contact.gif" class="image_menu_contact" alt="Contactez MC JiminyKee" /> </a> </li>
						</ul>
					</div>
 
 
				<div class="bas_de_page">
					<a href="http://validator.w3.org/check?uri=http%3A%2F%2Favenir-serein.lescigales.org%2Fsite%2Findex.php"> <img src="CSS/xhtml.png" class="image_valid_xhtml1" alt="Vérifier la validité de cette page xhtml" /> </a>
					<a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Favenir-serein.lescigales.org%2Fsite%2Findex.php"> <img src="CSS/css2.png" class="image_valid_css2" alt="Vérifier la validité de la feuille css associée" /> </a>
				</div>
 
			</body>
	</html>

Et mon nouveau 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
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
body
{
	background: url(null) fixed;
	background-color: green;
	color: #FFFFFF;
}
p
{
	background-color: #000000;
	color: #FFFFFF;
}
li
{
	list-style-type: none;
}
.haut_de_page
{
	width: 100%;
	height: 25%;
	background-color: #000000;
	color: #FFFFFF;
	margin: auto;
	position: relative;
	top: 0%;
}
.bas_de_page
{
	width: 60%;
	height: 10%;
	background-color: #000000;
	margin: auto;
	text-align: center;
	color: #FFFFFF;
	position: relative;
	top: 10%;
}
.menus_gauche
{
	width: 17%;
	background-color: #000000;
	color: #FFFFFF;
	position: absolute;
	top: expression(documentElement.scrollTop+body.scrollTop+250);
    left: expression(documentElement.scrollLeft+body.scrollLeft+0);
}
.menus_droit
{
	width: 17%;
	background-color: #000000;
	color: #FFFFFF;
	position: absolute;
	top: expression(documentElement.scrollTop+body.scrollTop+250);
    right: expression(documentElement.scrollLeft+body.scrollLeft+0);
}
#contenu
{
	width: 60%;
	height: auto;
	background-color: #000000;
	color: #FFFFFF;
	margin: auto;
	position: relative;
	top: 5%;
}
.banniere_jiminikee_mc
{
	background-image: url("banniereluc.gif");
	background-repeat: no-repeat;
	width: 900px;
	height: 120px;
	margin: auto;
}
.image_menu_bio
{
	border-width: 6px;
	border-style: outset;
	border-color: #0000FF;
	position: absolute;
	top: 5%;
	left: 0%;
}
.image_menu_contact
{
	border-width: 6px;
	border-style: outset;
	border-color: #0000FF;
	position: absolute;
	top: 140%;
	left: 0%;
}
.image_menu_photos
{
	border-width: 6px;
	border-style: outset;
	border-color: #0000FF;
	position: absolute;
	top: 140%;
	right: 0%;
}
.image_menu_sound
{
	border-width: 6px;
	border-style: outset;
	border-color: #0000FF;
	position: absolute;
	top: 5%;
	right: 0%;
}
.image_valid_xhtml1
{
	width: 88px;
	height: 31px;
	border-style: none;
}
.image_valid_css2
{
	width: 88px;
	height: 31px;
	border-style: none;
}