Probleme de marges

**xenos** · 01/08/2006, 17h42

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

)

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 :

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
<!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 :

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
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
++

**fallais** · 01/08/2006, 17h55

Ton probleme vient de la :

Code :

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

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