Bonjour, je me lance dans les css alors que j'y était hermétique... Je sais que'il y a des problèmes de compatibilité mais là quand-même :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <header class="header">
 
    </header>
    <contenu class="contenu">
 
    	BlaBlaBlaBla
 
    </contenu>
    <footer class="footer">
 
    </footer>
</body>
</html>
ensuite mon fichier de style :

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
 
@charset "utf-8";
/* CSS Document */
body,td,th {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #CCCCCC;
}
 
body {
	background-color: #000000;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
 
a:link {
	color: #CCCCCC;
	text-decoration: none;
}
a:visited {
	color: #CCCCCC;
	text-decoration: none;
}
a:hover {
	color:#FC0;
	text-decoration: none;
}
a:active {
	color: #CCCCCC;
	text-decoration: none;
}
 
.titre {
	color: #FF9900;
	font-size: 16px;
	font-weight:bold;
}
 
.telecharge {
	color: #FF9900;
	font-weight: bold;
}
 
.bigwhite{
	font-size: 36px;
	color: #FFFFFF;
}
 
.header {
	display:block;
	width:1000px;
	height:150px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	margin-bottom:0px;
	background-image:url(../images/banniere.jpg);
}
 
.contenu {
	display:block;
	width:1000px;
	overflow:auto;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:0px;
}
 
.footer {
	display:block;
	width:1000px;
	height:50px;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:20px;
}
C'est quand-même du simple non ?

Alors pourquoi sous chrome, firefox ça marche super : j'ai ma tête de site avec ma photo qui s'affiche centré et tout alors que sous ie8 le style pour header et footer ne s'affichent pas, et le block contenu s'étale sur toute la largeur...

Pourtant j'utilise pas de trucs exotiques...