IE ne me centre pas ma div

**PIMPMAX** · 17/06/2009, 12h07

Hello,

J'ai créé une page, avec un CSS ultra simple.
Firefox m'affiche correctement la page, c'est à dire, ma div "contenu" au centre.
Par contre IE me colle ma div à gauche ! et j'ai beau chercher je ne trouve pas la faille.

...ça m'éneeeeeeerve !

merci pour votre aide.
voici ma 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
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
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
<head>
       <title></title>
 
 
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
 
		<script type="text/javascript" src="/js/prototype.js"></script>
		<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
		<script type="text/javascript" src="/js/lightbox.js"></script>
		<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
 
		<link rel="stylesheet" type="text/css" href="/css/dirigeants.css">
		<style type="text/css">
        h2, th
        {
            text-align:center;
 
        }
		td
		{
			font-size:12px;
			text-align:center;
		}
        table
        {
            border-collapse:collapse;
            border:2px solid black;
            margin:auto;
        }
        th, td
        {
            border:1px solid black;
        }
        </style>
</head>	
<body>
 
	<div id="contenu">
 
<object data="/utiles/dewslider.swf?xml=/utiles/dewsliderbanniere.xml" 
				type="application/x-shockwave-flash" 
				width="870" height="180" align="middle">
				<param name="movie" value="/utiles/dewslider.swf?xml=/utiles/dewsliderbanniere.xml" />
				</object>			
 
			<br /><br />
 
    <div id="centre">
		<h1>Gouvieux Basket Oise : Agenda ! </h1>
 
                <b>Bienvenue dans l'Agenda !<br />
                 Voici les matchs se jouant à Gouvieux, pour s'inscrire dans une fonction, cliquez sur "je m'inscris" puis suivez les indications.<br />
                Si vous souhaitez vous désinscrire suite à une erreur ou à un empechement de dernière minute, cliquez sur "désinscription".<br />
               </b>
 
				<br /><br />
 
<table width="100%">
	<tr>
		<th>Date</th>
		<th>Heure</th>
		<th>Match</th>
		<th>Responsable de salle</th>
		<th>Feuille de marque</th>
		<th>Chrono</th>
		<th>Buvette</th>
		<th>Désinscription</th>
	</tr>
</table>              
 
 
 
	</div>
 
 
</div>
 
 
</body>
</html>

et mon 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
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
body
{
	margin: 0px;
	width:100%;
	padding: 0 ;
	text-align: justify ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: url("../images/backgroundball.png");
	background-repeat:repeat-x ;
	background-position:top left;
	background-attachment: fixed;
}
 
 
 
 
 
div#contenu
{
	width: 1000px ;
	padding: 0px 0px 0px 0px ;
	background-color:#FFFFFF;
	border-right:2px solid #D27E23;
	border-left:2px solid #D27E23;
	border-bottom:2px solid #D27E23;
	border-top:2px solid #D27E23;
	color:#000000;
	margin: 0px auto 0px auto;
}
 
div#bannieretop
{
	width:870px;
	height:180px;
	background: url("../images/bannieretop.png");
	background-position:top center;
	background-repeat:no-repeat;
}	
 
 
#menugauche
{
   	float: left; /* Le menu flottera à gauche */
   	width: 215px;
	height:auto;
	margin-bottom:100px;
 
}
 
.menug
{
 		float: left;
	background: white url(../images/milieu-bas.png) no-repeat;
	background-position: center bottom;
	margin-right: 5px;
	margin-left: 8px;
	/*padding: 5px;*/
	padding-bottom: 20px;
	width: 205px;
	font-size: 13px;
	font-color: #336666;
	margin: 1em 10px;
	text-align: center;
 
}
 
.menug h2 /* Tous les titres de menus */
{    
 	margin: 0;
	padding: 20px 20px 5px 20px;
	background: transparent url(../images/css/haut.gif) no-repeat;
	background-position: center top;
	text-align: center;
	font-size: 14px;	
	color:#FFF;
}
 
 
 
.menug a /* Tous les liens se trouvant dans un menu */
{
   color: #006666;
 
}
 
.menug a:hover /* Quand on pointe sur un lien du menu */
{
 
   color: #bcd81e;
}
 
#menudroite
{
   	float: right; 
   	width: 25%;
	height:auto;
	margin-bottom:20px;
	padding:5px;
 
}
 
.menud
{
 		float: left;
	background: white url(../images/milieu-bas.png) no-repeat;
	background-position: center bottom;
	margin-right: 5px;
	margin-left: 8px;
	/*padding: 5px;*/
	padding-bottom: 20px;
	width: 205px;
	font-size: 13px;
	font-color: #336666;
	margin: 1em 10px;
	text-align: center;
 
}
 
.menud h2 /* Tous les titres de menus */
{    
 	margin: 0;
	padding: 20px 20px 5px 20px;
	background: transparent url(../images/haut.png) no-repeat;
	background-position: center top;
	text-align: center;
	font-size: 14px;	
}
 
 
 
.menud a /* Tous les liens se trouvant dans un menu */
{
   color: #006666;
 
}
 
.menud a:hover /* Quand on pointe sur un lien du menu */
{
 
   color: #bcd81e;
}
 
div#centre  {
 
	overflow: hidden;
	padding:5px;
	margin-bottom:50px;
}
 
div#centre h1 {
	text-align: left;
	font-size:12px;
	font-style:italic;
	color:#D48328;
 
}

**Macmillenium** · 17/06/2009, 12h15

Bonjour,

Ta div contenu est centrée via les marges automatiques ?

Si oui, IE7- gère mal le margin:auto; il faudrait donc rajouter un text-align:center sur le body.

D'autre part, as tu un doctype complet et valide ?

**Candygirl** · 17/06/2009, 14h15

Hello,

C'est en mode quirks (versions d'IE inférieure à la 6 ou problème de déclaration de doctype) que IE ne gère pas le centrage à l'aide du margin:auto.

Ici il s'agit clairement d'un problème de doctype comme l'a relevé Macmillenium.

IE ne me centre pas ma div

CSS

Vue hybride

Discussions similaires

Partager

Partager