margin non pris en compte sous ie7

Version imprimable

Bonjour,

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title>SUPERVISION</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
	<style type="text/css">
body{
	margin:0;
	padding:0;
	background-color:red;}
 
table{
	margin:1em auto;
	padding:0;
	font-size:0.9em;
	border-collapse:collapse;
	border:2px solid #00039e;
	color:#00039e}
 
th{
	font-weight:bold;
	background-color:#00039e;
	color:white;
	font-weight:bold}
 
th, td{
	border:1px solid #00039e;
	text-align:center;
	padding:0.2em 1em;
	margin:0}
 
td{background-color:white}
 
#zone1{
	margin:1em;
	padding:0;
	background-color:yellow;
	border:2px solid black;}
 
	</style>	
</head>
 
<body>
	<div id="zone1">	
		<table>
			<thead>
				<tr>
				<th colspan="3">AAAAA</th>
				</tr>
				<tr>
				<th>AA</th>
				<th>AA</th>
				<th>AA</th>
				</tr>
			</thead>
 
			<tbody>
				<tr>
				<td>BB</td>
				<td id="link0">?</td>
				<td id="trans0">?</td>
				</tr>
				<tr>
				<td>BB</td>
				<td>?</td>
				<td>?</td>
				</tr>
				<tr>
				<td>BB</td>
				<td>?</td>
				<td>?</td>
				</tr>
				<tr>
				<td>BB</td>
				<td>?</td>
				<td>?</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

=> pourquoi le margin (top et bottom) de mon tableau n'est pas pris en compte sous ie7 ?

Remarque : si je mets mon tableau dans un div avec margin et padding à 0, alors le margin du tableau est pris en compte :aie: ... je ne vais quand même pas mettre tous mes tableaux dans des div ????

01/04/2008, 12h47
Erwan31

Bonjour,
c'est un problème fréquent de fusion des marges. Ajouter un overflow:hidden #zone1.

merci pour la réponse : ça marche sous ie7 mais pas sous ie6 :(

nouvel exemple corrigé :

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
88
89
90
91
92
93
94
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title>SUPERVISION</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
	<style type="text/css">
body{
	margin:0;
	padding:1px 0;
	background-color:white;
	}
 
table{
	margin:1em auto;
	padding:0;
	font-size:0.9em;
	border-collapse:collapse;
	border:2px solid #00039e;
	color:#00039e}
 
th{
	font-weight:bold;
	background-color:#00039e;
	color:white;
	font-weight:bold}
 
th, td{
	border:1px solid #00039e;
	text-align:center;
	padding:0.2em 1em;
	margin:0}
 
td{background-color:white}
 
#zone1{
	margin:0;
	padding:1em;
	background-color:red;
	}
 
#zone2{
	overflow:hidden; /*correction de bug : fusion de me marges */
	margin:0;
	padding:1px 0; /* ça ne corrige pas les bugs */
	background-color:yellow;
	}
 
	</style>	
</head>
 
<body>
	<div id="zone1">
		<div id="zone2">	
			<table>
				<thead>
					<tr>
					<th colspan="3">AAAAA</th>
					</tr>
					<tr>
					<th>AA</th>
					<th>AA</th>
					<th>AA</th>
					</tr>
				</thead>
 
				<tbody>
					<tr>
					<td>BB</td>
					<td>?</td>
					<td>?</td>
					</tr>
					<tr>
					<td>BB</td>
					<td>?</td>
					<td>?</td>
					</tr>
					<tr>
					<td>BB</td>
					<td>?</td>
					<td>?</td>
					</tr>
					<tr>
					<td>BB</td>
					<td>?</td>
					<td>?</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>

=> j'ai essayé de mettre des padding sur toutes mes zones mais ça ne fonctionne pas

02/04/2008, 19h10
rems033

et si tu précise

Code:

margin-top:0px;margin-bottom:0px;

ca donne quoi?
Et tout simplement en rajoutant

Code:

margin:0px;

???
02/04/2008, 19h49
Candygirl

Citation:

Envoyé par Emcy

merci pour la réponse : ça marche sous ie7 mais pas sous ie6 :(

C'est normal l'overflow:hidden ne donne malheureusement pas le layout sur IE6.
Dans ton cas, un width:100%; pourrait faire l'affaire.
03/04/2008, 11h59
Emcy

Citation:

Envoyé par Candygirl

C'est normal l'overflow:hidden ne donne malheureusement pas le layout sur IE6.
Dans ton cas, un width:100%; pourrait faire l'affaire.

merci, effectivement ça marche => c'est vraiment l'anarchie avec tous ces navigateurs :( ...

par contre, il y a un truc que je n'ai pas bien compris :
- si je fais un width:100%; sur zone 1, alors zone 1 prend comme taille la largeur de la page => il y a donc depassement
- si je fais un width:100%; sur zone 2, alors zone 2 prend comme taille toute la largeur disponible => il n'y a donc pas de dépassement

=> pourquoi ça ne réagit pas de la meme façon ?
03/04/2008, 12h06
Erwan31

Bonjour,
Pour la zone1 tu as déclaré border:2px solid black ce qui ajoute 4px au 100% de la zone d'affichage donc il y a dépassement.
03/04/2008, 12h46
Emcy

Citation:

Envoyé par Erwan31

Bonjour,
Pour la zone1 tu as déclaré border:2px solid black ce qui ajoute 4px au 100% de la zone d'affichage donc il y a dépassement.

=> non, ce n'est pas ça.... de plus je parle de mon deuxième exemple (il n'y a pas de border)...
03/04/2008, 12h49
Candygirl

Dans ton 2ème exemple tu as un padding latéral de 1em sur le zone1, d'où le dépassement. Si je t'ai proposé le width 100% sur le zone2 c'est parce qu'il n'avait ni margin ni padding ni border latéraux.
03/04/2008, 12h57
Emcy

ok, j'ai compris : merci