Probleme de marges

Bonjour tout le monde, j'espère que vous passez de bonnes vacances ^^

Je viens de me lancer dans la création d'un petit site, mais j'ai un probleme avec mes marges. En fais sous firefox tout fonctionne parfaitement, mais sous internet explorer ce n'est pas le cas.

Pour que vous voyez bien le probleme j'ai fait deux screens :

Sous IE
Sous Firefox

(faites pas attention a homer :P )

Comme vous le voyez sous IE il y a un espace de trop en dessous du menu, alors que sous FireFox il n'y est pas. J'ai essayé pas mal de manières de supprimer cet espace, mais quand c'était bien sous IE, ca ne l'était plus sous FireFox :(

Voici mon code :

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
<!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" xml:lang="fr" >
        <head>
                <title>test</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <link rel="stylesheet" media="screen" type="text/css" title="style" href="templates/LightBlue/style.css" />
        </head>
 
        <body>
 
                <!-- Header -->
 
                <div id="header">
 
                </div>
 
                <!-- Menu -->
 
                <div id="menu">
                        <div class="bloc_menu">
                                <h4>Navigation</h4>
                                <p>blog menu</p>
                        </div>
 
                        <div class="bloc_menu">
                                <h4>Recherche</h4>
                                <p>blog menu</p>
                        </div>
 
                        <div class="bloc_menu">
                                <h4>Membres</h4>
                                <p>blog menu</p>
                        </div>
                </div>
 
                <!-- Corps -->
 
                <div id="corps">
                        <div class="bloc_corps">
                                <h4>Titre corps</h4>
                                <p>Corps<br/>Corps</p>
                        </div>
 
                        <div class="bloc_corps">
                                <h4>Titre corps</h4>
                                <p>Corps<br/>Corps</p>
                        </div>
                </div>
 
                <!-- Footer -->
 
                <div id="footer">
                        <p>© 2005 - &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; - <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.1</a></p>
                </div>
 
   </body>
</html>

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
86
87
body
{
        background:url('img/bg.png');
        margin: auto;
        margin: 10px;
}
 
#header
{
        text-align: center;
        border: 1px solid #8396c3;
        background-color: #f2f5fb;
        background-image: url("img/banniere.jpg");
        background-repeat: no-repeat;
        margin-bottom: 10px;
        height: 96px;
}
 
/* - Menu - */
 
#menu
{
        float: left;
        width: 190px;
}
 
.bloc_menu
{
        border: 1px solid #8396c3;
        background-color: #f2f5fb;
        padding: 5px;
        margin-bottom: 10px;
}
 
/* - Corps - */
 
#corps
{
 
}
 
.bloc_corps
{
        margin-left: 200px;
        margin-bottom: 10px;
        border: 1px solid #8396c3;
        background-color: #f2f5fb;
        padding: 5px;
}
 
/* - Footer - */
 
#footer
{
        clear: both;
        text-align: center;
        border: 1px solid #8396c3;
        background-color: #f2f5fb;
        padding: 5px;
        margin-top: 10px;
}
 
/* - Brol :p - */
 
p
{
        font-family: Verdana, serif;
        font-size: 11px;
        margin: 0px;
}
 
h4
{
        font-family: Verdana, serif;
        margin: 0px;
}
 
a
{
        color: #475e88;
        text-decoration: none;
}
 
a:hover
{
        color: #000000;
}

Merci d'avance pour votre aide
++

Ton probleme vient de la :
Code:

1 2 3 4 5 6 7 8 .bloc_corps { margin-left: 200px; margin-bottom: 10px; border: 1px solid #8396c3; background-color: #f2f5fb; padding: 5px; }
Faudrait que tu mettes des balises <br /> entre chaque bloc au lieu de jouer avec les marges :) Enfin moi je ferais comme ca :) Et puis comme ca tous les espaces serait unique et de la taille d'un saut de ligne :)

ahh effectivement, un grand merci, tout est rentré dans l'ordre :D
bon developpement à tous
++ ;)