Décalage avec Internet Explorer

**beta1204** · 23/02/2009, 14h58

Salut a tous, j'espère être dans la bonne session puisque je pense que c'est un problème CSS...

Voila j'ai un gros souci avec Internet Explorer, je m'explique je code en vérifiant avec firefox après je vérifie avec opera, safari impeccable, avec IE tout le contenu de mon site est complètement décalé.
Voici le site si vous souhaité constaté par vous même: http://romaingrenier.niloo.fr/

Voici le code HTML de la page d'accueil:

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
<!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=utf-8" />
<meta name="Description" content="romain grenier - mon portFolio, infographie, web, developpement web, creation numerique, Formation multimedia, Formation DUT SRC Rouen, Services et Réseaux de Communication, Elbeuf, cv, niloo" />
<meta name="Keywords" content="romain, grenier, romain grenier, rouen, elbeuf, src, services et reseaux de communication, web, developpement web, web-design, infographie, multimedia, portfolio, curriculum, niloo" />
<meta name="Robots" content="all" />
<meta name="REVISIT-AFTER" content="30days" />
<meta http-equiv="Content-Language" content="fr-FR" />
<meta name="location" content="France, FRANCE" />
<meta http-equiv="PRAGMA" content="no-cache" />
<meta name="distribution" content="global" />
<meta name="identifier-url" content="http://romaingrenier.niloo.fr/" />
<meta name="email" content="rom.grenier@gmail.com" />
<meta name="publisher" content="Romain Grenier" />
<meta name="copyright" content="Romain Grenier - Tous droits réservés" />
<meta name="Author" content="Romain Grenier" />
<meta name="verify-v1" content="qNj3SNRcx/Ug5o6FW3lr2Pryo97iChQbIfSd6M9MnM4=" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style_index.css" />
<link rel="icon" type="image/png" href="images_sites/favicon.ico" />
<title>Romain Grenier - Accueil</title>
</head>
 
<body>
	<div id="banniere">
		<a href="http://romaingrenier.niloo.fr/"><img src="images_sites/romain_grenier.png" class="ma_banniere" alt="banniere"/></a>
    </div>
 
	<div id="menu">
   		<ul>
			<li><a href="http://romaingrenier.niloo.fr/" class="accueil"></a></li>
			<li><a href="portfolio.html" class="portfolio"></a></li>
			<li><a href="cv.html" class="cv"></a></li>
			<li><a href="contact.php" class="contact"></a></li>
	  </ul>
    </div>
 
<div id="contenu">    
    	<div id="barre_bienvenue">
            	<div id="texte_bienvenue">
Je m'appelle Romain Grenier, je suis actuellement en deuxième année à l’IUT de Rouen, département Services et Réseaux de Communication (SRC).<br />
Cette formation nous permet d'acquérir de nombreuses compétences dans trois domaines en particulier, celui de la communication, de l'audiovisuel et du web. Elle vise à former des techniciens supérieurs en multimédia capables de s’intégrer dans des équipes de conception et de réalisation de projets multimédias. Le domaine de cette formation que j’affectionne tout particulièrement est celui du web. 
    			</div>
    	</div>
 
        <div id="news">
        	<div class="note"> 
             	<ul>
                    <li>Site en construction</li>
                    <li><span class="gras">Recherche de stage</span></li>
                    <li>Réalisation d'une web TV pour l'ACD SRC (<a href="http://www.src-rouen.fr/">plus d'info</a>)</li>
				</ul>
            </div>
		</div>
        <div class="clear"></div>
</div>   
<div id="bas">   
    <div id="flooder">
    Copyright © 2009 <a href="contact.php">Romain Grenier</a>
    </div>
</div>    
 
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7397321-1");
pageTracker._trackPageview();
} catch(err) {}</script> 
</body>
</html>

Et le code CSS lié:

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
196
@charset "utf-8";
/* CSS Document */
body{
	width:574px;
	background:url(images_sites/fond3.png) no-repeat top center #493740;
	margin:auto;
	padding:0px;	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
}
 
/*/////////////////////////////////////
				banniere_nom
////////////////////////////////////*/
#banniere{
	margin:0px;
	padding:0px;
	margin-left:145px;
	margin-top:14px;
}
 
.ma_banniere{
	border:none;
}
 
/*/////////////////////////////////////
				fin_banniere_nom
////////////////////////////////////*/
/*/////////////////////////////////////
				menu
////////////////////////////////////*/
#menu{
	margin:0px;
	padding:0px;
	margin-left:33px;
	padding-bottom:138px;
}
 
 
#menu ul li {
	list-style:none;
	float:left;
	margin:0px;
	padding:0px;
	margin-top:65px;
}
 
#menu ul li a{
	height:23px;
	width:106px;
	display:block;
	background:no-repeat top left;
	outline:none;
	}
 
#menu ul li a.accueil{
	height:23px;
	width:106px;
	display:block;
	background-image:url(images_sites/accueil.png);
	background-position:bottom left;
	}
 
#menu ul li a:hover{
	background-position:bottom left;
}
 
#menu ul li a.accueil{
	background-image:url(images_sites/accueil.png);
}
 
#menu ul li a.portfolio{
	background-image:url(images_sites/portfolio.png);
}
 
#menu ul li a.cv{
	background-image:url(images_sites/cv.png);
}
 
#menu ul li a.contact{
	background-image:url(images_sites/contact.png);
}
 
/*/////////////////////////////////////
				fin_menu
////////////////////////////////////*/
 
 
 
/*/////////////////////////////////////
				contenu_corps_gauche
////////////////////////////////////*/
#contenu{
	background:url(images_sites/barre_corps.png) repeat-y left;
}
 
#barre_bienvenue{
	float:left;
	height:26px;
	width:246px;
	background:url(images_sites/barre_bienvenue.png) no-repeat;
	padding:0px;
	margin-left:20px;
	margin-bottom:190px;
}
 
#texte_bienvenue{
 
	width:220px;
	padding:40px 15px;
	line-height:13px;
	font-weight:bold;
	text-align:justify;
}
 
/*/////////////////////////////////////
			fin_contenu_corps_gauche
////////////////////////////////////*/
 
 
/*/////////////////////////////////////
				contenu_corps_droite
////////////////////////////////////*/
 
#news{
float:right;
}
 
.note{
	height:185px;
	width:140px;
	margin:0px;
	margin-right:70px;
	margin-top:10px;
	background:url(images_sites/news.png) no-repeat top left;
}
 
#news ul{
	margin:0px;
	padding:5px;
	padding-left:25px;
	padding-right:10px;
	padding-top:45px;
	line-height:18px;
}
 
#news ul li a{
	color:#493740;
	text-decoration:none;
 
}
 
#news ul li a:hover{
	color:#000000;
}
 
.gras{
	font-weight:bold;
}
 
.clear{
	clear:both;
}
/*/////////////////////////////////////
			fin_contenu_corps_droite
////////////////////////////////////*/
 
 
/*/////////////////////////////////////
			flooder
////////////////////////////////////*/
#bas{
	width:568px;
	height:44px;
	background:url(images_sites/barre_corps_fin.png) no-repeat;
}
 
#flooder{
float:right;
margin:0px;
margin-right:20px;
padding-top:17px;
font-style:italic;
color:#493740;
}
 
#flooder a{
	color:#666666;
}
 
#flooder a:hover{
	color:#493740;
}
/*/////////////////////////////////////
			fin_flooder
////////////////////////////////////*/

En espérant que ma présentation soit correcte, je suis nouveau sur le forum
Merci

**Ethyde** · 23/02/2009, 15h33

Au niveau structure je pense que tu devrait englober ton site dans un div maitresse que tu centrerais, plutôt que de chercher à centrer chacun des élément par rapport à la fenêtre du navigateur (en fait l'élément body ici).

Par contre j'avoue avoir du mal à comprendre certain placement avec margin-bottom comme le titre par exemple

**Atomicfryer** · 23/02/2009, 15h42

Il vaut mieux que tu travail avec un conteneur global... surtout que IE 6 (principalement, et moins IE 7) gère les décalages, marge, épaisseurs de bordure de manière différente.

exemple : si tu as une div de 200px de large avec un padding de 5px et une marge de 5px également... sous FF ton emprise totale sera de 5+5+200+5+5 soit 220px alors que sous IE 6 ta largeur global sera de 200px

(merci desert)

**desert** · 23/02/2009, 17h02

Envoyé par Wolfy

exemple : si tu as une div de 200px de large avec un padding de 5px et une marge de 5px également... sous IE 6 ton emprise totale sera de 5+5+200+5+5 soit 220px alors que sous FF ta largeur global sera de 200px

C'est le contraire plutôt.

Concernant le problème, je vois que tu appliques un margin-bottom de 190px à ton div #barre_bienvenue. C'est peut-être la source de ton pépin.
Tu as aussi le height à 26px aussi (toujours pour le même div) qui peut poser soucis.

**beta1204** · 23/02/2009, 17h37

Ok donc j'ai rajouter un conteneur, il avait déja fallu que je le fasse pour ma page "portfolio" puisque j'utilise une lightbox, mais sa change rien, voila mon conteneur:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
@charset "utf-8";
/* CSS Document */
body{
	background:url(images_sites/fond3.png) no-repeat top center #493740;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
}
 
#conteneur{
	width:574px;
	margin:0 auto;
	padding:0px;
}

Je comprends pas pourquoi lorsque je place par exemple ma bannière, qui est mon premier objet en haut de ma page, correctement que se soit sous firefox ou IE elle est pas placer pareil au niveau de la hauteur dès que je passe sur l'autre navigateur. Du coup je n'aarive jamais a avoir la même chose que ce pour tout le contenu

Merci de m'aider c'est cool parce que la IE il commence vraiment a m'énerver je cherche et je trouve pas

**Macmillenium** · 23/02/2009, 17h38

Envoyé par desert

C'est le contraire plutôt.

Même pas.

En mode de rendu Quirks, IE utilise son propre modèle de boîte, c'est un comportement non stadard :
150px+5px+5px = 150px

En mode Almost standard, IE utilise correctement le modèle de boîte du W3C qui inclus les valeurs des paddings dans la largeur.
150px+5px+5px = 160px

**Ethyde** · 23/02/2009, 17h45

Envoyé par beta1204

Ok donc j'ai rajouter un conteneur, il avait déja fallu que je le fasse pour ma page "portfolio" puisque j'utilise une lightbox, mais sa change rien, voila mon conteneur

Visiblement tu n'as pas "update" la page mise en ligne, difficile donc de pouvoir évaluer les problèmes qui pourrais subsister

**beta1204** · 23/02/2009, 17h58

ok désolé c'est vrai que je n'avais pas mis a jour ma page index sur le site maintenant c'est fait

Pour le margin-bottom de 190px je l'ai changé en padding bottom c'est pour baissé mon "Copyright © 2009 Romain Grenier"

**Ethyde** · 24/02/2009, 00h26

Envoyé par beta1204

Hum c'est pas au titre de ton contenue de déterminer la position de ton pied de page

Donc enlever le padding bottom. Ensuite le problème de ton pied qui remonte et qui ne reste pas fixer sur la hauteur de ton texte tu peut faire plusieurs méthode :

Soit tu ajoute une indication de hauteur à ta div contenu (220px me semble). Ou si ton texte est susceptible d'évoluer modifier l'ordre de tes div ainsi :

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
<div id="contenu">
	<div id="news">
		<div class="note"> 
			<ul>
				<li>Site en construction</li>
				<li><span class="gras">Recherche de stage</span></li>
				<li>Réalisation d'une web TV pour l'ACD SRC (<a href="http://www.src-rouen.fr/">plus d'info</a>)</li>
			</ul>
		</div>
	</div>    
	<div id="barre_bienvenue">
		<div id="texte_bienvenue">
		</div>
   </div>
</div

Et ta css ainsi :

Code :

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

1
2
3
4
5
6
7
#barre_bienvenue{
	height:26px;
	width:246px;
	background:url(images_sites/barre_bienvenue.png) no-repeat;
	padding:0px;
	margin-left:20px;
}

**beta1204** · 24/02/2009, 13h15

ok merci Ethyde javoue que c'est mieux je n'y avit pas pensé c'est beaucoup mieux si mon texte change.
Par contre j'ai toujours le même problème au niveau du décalage je me suis rendu compte aussi que enfaite quand en réduit la fenêtre du navigateur même n'importe lequel mon contenu se recentre automatiquement n'étant plus centrer avec mon fond la aussi c'est peut être de la mon problème?
J'ai "update" la petite modif' que tu ma conseillé (http://romaingrenier.niloo.fr/)

Merci

**Ethyde** · 24/02/2009, 13h54

Ton fond est poté par l'élement Body, le reste de ton site étant lui centré par rapport au navigateur.

Modifie ta css ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
body{
        background:#493740;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
}
#conteneur{
	background:url(images_sites/fond3.png) no-repeat top center;
	width:574px;
	margin:0 auto;
	padding:0px;
}

**beta1204** · 24/02/2009, 17h35

Ouai c'est cool vraiment merci Ethyde c'est bon plus aucun décalage que se soit sur firefox, IE, Opera, Chrome ou safari je met tout a jour et je vous redi tout

**beta1204** · 24/02/2009, 18h40

donc voila impeccable merci a tous le site fonctionne parfait sur tous les navigateurs enfin que j'ai testé...
Voila si vous voulé vérifier le résultat:
http://romaingrenier.niloo.fr/

**Ethyde** · 24/02/2009, 18h43

De rien

N'oublie pas le tag "résolue"

Décalage avec Internet Explorer

CSS

Discussions similaires

Partager

Partager