[HTML] Problème affichage IE

Bonsoir,

Voilà, je viens de commencer un site, c'est plus un test qu'autre chose, mais c'est quand même important !

Voilà, je viens de réaliser mon index.php, ainsi que le CSS qui va agencer un peu toute la mise en forme du site.

Mais voilà, l'affichage de base est déjà mal parti. Le site donne très bien sous Firefox, Safari mais sous Internet Explorer l'affichage explose complètement.

Je suis certain que c'est lié à mes margin et padding, qui je l'avoue me font devenir fou !

Voir ici : Lien

Voici les contenus des fichiers de base :

[ global.css ]

Code:

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
@charset "utf-8";
/* CSS Document */
 
body {
	background: #000000 url(images/back-body.png) repeat-x left top;
	font-size: 12px;
	font-family: "Trebuchet MS", Arial, sans-serif;
	color: #FFF;
	}
 
#back {
	background: url(images/back.png) no-repeat center ;
	width: 1000px;
	height: 700px;
	margin: 0 auto;
}
 
#page {
	width: 750px;
	margin: 0 auto;
	padding-top: 141px;
}
 
#header, #content, #footer {
	width: 100%;
}
 
#header {
	position: fixed;
	height: 40px;
	width: 470px;
	margin-left: 275px;
	margin-top: -73px;
}
#content {
	width: 345px;
	height: 342px;
	padding: 16px;
	margin-top: 70px;
	margin-left: 335px;
}
 
#menu {
	position: absolute;
 
}
 
#footer { 
	position: relative;
	margin-top : 56px; 
	text-align:center;
}
 
#menu li {
	margin-left: 1px;
	float: left;
	list-style: none;
	}
 
#menu a {
		height: 22px;
		line-height: 15px;
		padding: 0 9px;
		display: block;
		float: left;
		font-weight: bold;
		color: #FFF;
		text-decoration:none;
 
	}
 
#menu a:hover {
		background: url(images/menu-shadow.png) repeat-x;
		text-decoration: none;
	}
 
#footer p { 
	color: #CCCCCC;
	font-size: 10px;
	}
 
#footer a {
	font-weight: bold;
	color: #CCCCCC;
	}

[ index.php ]

Code:

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
<!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" />
<title>Vovinam - Viet Vo Dao</title>
	<meta name="Title" content="Vovinam - Viet Vo Dao" />
	<meta name="Publisher" content="Vovinam" />
	<meta name="Owner" content="Vovinam" />
 
	<meta http-equiv="Content-Language" content="French" />
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="robots" content="index, follow" />
 
<link rel="stylesheet" media="screen" type="text/css" href="css/global.css" />
 
<style type="text/css">
<!--
.Style1 {color: #FF0000}
-->
</style>
</head>
 
<body>
 
	<div id="back">
    	<div id="page">
        	<div id="header">
            	<ul id="menu">
                	<li><a href="?module=accueil" title="Accueil du site">Accueil</a></li>
            		<li><a href="?module=vovinam" title="Le Vovinam">Le Vovinam</a></li>
            		<li><a href="?module=staff" title="Le Staff">Le Staff</a></li>
                    <li><a href="?module=club" title="Le Forum">Le Forum</a></li>
                    <li><a href="?module=club" title="Le Tchat">Le Tchat</a></li>
            		<li><a href="?module=contact_us" title="Nous contacter">Contact</a></li>
          		</ul>
            </div>
            <!-- end of #header -->
    		<div id="content">
            	Essai
            </div>
            <!-- end of #content -->
            <div id="footer">
            	<p>Copyright © 2008 Vovinam | Privacy Policy | Terms of Use | </p>
            </div>
        </div>
    </div>
 
</body>
</html>

Comment le rendre propre et parfaitement lisible sur IE ?

Merci d'avance pour votre aide !
:oops:

[HTML] Problème affichage IE | Firefox