margin h1 non prise en compte sous firefox

**kanabzh29** · 23/10/2008, 11h55

Bonjour,

J'ai crée un style pour une balise h1 avec des margin. Sous IE, toutes les margin sont prises en compte, sous firefox, la margin du bas n'est pas prise en compte et je ne vois pas pourquoi, voila le code :

Code :

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

1
2
3
4
5
h1 {
	font:				1em;
	font-weight:		bold;
	margin:				10px 5px 10px 5px;
}

Si quelqu'un pouvait m'aider.

**HiRoN** · 23/10/2008, 12h01

Salut,

Apparemment, pas d'erreur au niveau du CSS que tu donnes.
Le problème pourrait venir d'une propriété appliquée à un élément parent.
Sans plus de code, difficile de dire...

**kanabzh29** · 23/10/2008, 12h05

Vi c'est vrai j'aurais du donner tout le CSS. Le voici, ce sera plus simple.

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
 * {
	color:				#000;
	border:				0;
	margin:				0;
	padding:			0;
	font-family:    	"Trebuchet MS", Verdana, Arial, sans-serif;
}
 
body {
	background: 		#000;
}
 
#container {
	width: 				950px;
	background-color: 	#fff;
	margin:				30px 0 0 30px;
}
 
#header {
	height:				180px;
	background-color:	#fff;
}
 
#menu {
	height:				50px;
	background-color:	#ff00ff;
}
 
h1 {
	font:				1em;
	font-weight:		bold;
	margin:				10px 5px 10px 5px;
	background-color:	#ff00ff;
}
 
.element {
	background:			#000fff;
	margin:				10px;
}
 
p {
	margin: 			5px;
	color: 				#fff;
}

Ce n'est que le début du CSS, mais je préfère prendre le problèmes 1 par 1 et ne pas continuer tant qu'un n'est pas régler.

**blueice** · 23/10/2008, 13h33

Utilise Firebug dans Firefox, tu verras de suite.

**Erwan31** · 23/10/2008, 14h10

Sans doute un problème de fusion des marges mais sans le code HTML il n'est pas possible de te répondre de manière précise.

**kanabzh29** · 23/10/2008, 15h04

Voila le code 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
<body>
 
<div id="container">
	<div id="header">
	</div>
	<div id="menu">
	</div>
	<h1>Test</h1>
	<div class="element">
	<p>Texte</p>
	</div>
</div>
 
</body>

**Erwan31** · 23/10/2008, 15h13

Bonjour,
tout d'abord tu dois toujours préciser les versions des navigateurs qui posent
problème et d'autre part la marge basse du h1 est bien appliquée (elle fusionne avec la marge haute du div .element), c'est celle du
paragraphe de dessus qui n'est pas appliquée sous Firefox à cause d'un problème de fusion des marges (voir lien cité plus haut)

**blueice** · 23/10/2008, 15h15

Ca marche parfaitement.
Vérifie bien les caractères invisibles.
Code propre :

Code html :

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
 
<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<style type="text/css" title="text/css" media="screen">
/* <![CDATA[ */
* {
	color:				#000;
	border:				0;
	margin:				0;
	padding:			0;
	font-family:    	"Trebuchet MS", Verdana, Arial, sans-serif;
}
 
body {
	background: 		#FFF;
}
 
#container {
	width: 				950px;
	background-color: 	#fff;
	margin:				30px 0 0 30px;
}
 
#header {
	height:				180px;
	background-color:	#fff;
}
 
#menu {
	height:				50px;
	background-color:	#ff00ff;
}
 
h1 {
	font:				1em;
	font-weight:		bold;
	margin:				10px 5px 10px 5px;
	background-color:	#ff00ff;
}
 
.element {
	background:			#000fff;
	margin:				10px;
}
 
p {
	margin: 			5px;
	color: 				#fff;
}
/* ]]> */
</style>
</head>
<body>
 
<div id="container">
	<div id="header">
	</div>
	<div id="menu">
	</div>
	<h1>Test</h1>
	<div class="element">
	<p>Texte</p>
	</div>
</div>
 
</body>
</html>

**kanabzh29** · 23/10/2008, 15h30

Envoyé par Erwan31

Bonjour,
tout d'abord tu dois toujours préciser les versions des navigateurs qui posent
problème et d'autre part la marge basse du h1 est bien appliquée (elle fusionne avec la marge haute du div .element), c'est celle du
paragraphe de dessus qui n'est pas appliquée sous Firefox à cause d'un problème de fusion des marges (voir lien cité plus haut)

Merci j'ai résolu le problème avec la page sur la fusion des marges.
Par contre j'avais précisé que c'était sous firefox que le problème existait.

Merci de votre aide