Espace entre 2 divs sous IE6; Quel bug?

**celas** · 20/07/2009, 14h14

bonjour à toute la communauté, voici mon souci :

je refais la base d'un site, et dès le début, lors de mes premières divs, j'ai un souci sur IE6. Il m'a semblé avoir déjà lu la solution pour ce bug, mais impossible de retomber dessus, donc si vous aviez une idée, vous me feriez économiser du temps.

En gros j'ai 5divs : Une ombre haut, une ombre gauche, un contenu, une ombre droite, et une ombre/footer. et IE6 me met un espace entre l'ombre du haut et le reste, alors que sous FF and Co ça passe nikel.

Je vous joint le code au cas ou..

D'avance merci pour vos réponses

Voici le 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
<body>
 
	<div id="container">
		<div id="shadow_top">
		</div>
 
		<div id="shadow_left">
		</div>
 
		<div id="shadow_middle">
 
			<div id="logo_title">
				<div id="logo">
				</div>
				<div id="title">
				</div>
			</div>
 
			<div id="navbar">
				<div id="navbar_left">
				</div>
				<div id="navbar_middle">
				</div>
				<div id="navbar_right">
				</div>		
			</div>
 
			<div id="ariane">
				<div id="ariane_left">
				</div>
				<div id="ariane_middle">
				</div>
				<div id="ariane_right">
				</div>
			</div>
 
			<div id="column">
				<div id="column_left">
				</div>
				<div id="column_middle">
				</div>
				<div id="column_right">
				</div>
			</div>
 
		</div>
 
		<div id="shadow_right">
		</div>
 
		<div class="spacer">
		</div>
 
		<div id="footer">
		</div>
 
	</div>
 
</body>

Et voici le CSS :

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
#container {
	margin:0 auto;
	padding:0;
	border:0;
	width:960px;
	height:620px;			
}
 
#shadow_top
{
	width:960px;
	height:6px;
	background-image:url(images/shadow_top.png);
	background-repeat:no-repeat;
	background-color:black;
}
 
#shadow_left
{
	width:6px;
	height:590px;
	float:left;
	background-image:url(images/shadow_left.png);
	background-repeat:repeat-y;
	background-color:black;
}
 
#shadow_middle
{
	width:947px;
	height:590px;
	float:left;
	background-color:white;
}
 
 
#shadow_right
{
	width:7px;
	height:590px;
	float:right;
	background-image:url(images/shadow_right.png);
	background-repeat:repeat-y;
	background-color:black;
}
 
div.spacer{clear:both; display:block;}
 
#footer
{
	width:960px;
	height:24px;
	background-image:url(images/footer.png);
	background-color:black;
}

Merci beaucoup,

celas

**Candygirl** · 20/07/2009, 15h52

Hello,

IE6 donne une hauteur minimum aux éléments (sauf erreur la hauteur du line-height calculée à partir du font-size). Ton ombre du haut a une hauteur de 6px, clairement inférieur au 19px avec un font-size de base normal. Appliquer un overflow:hidden devrait règler ton souci:

Code :

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

1
2
3
4
5
6
7
#shadow_top
{
	width:960px;
	height:6px;
        overflow:hidden;
	background:black url(images/shadow_top.png) no-repeat;
}

**celas** · 20/07/2009, 16h07

Merci beaucoup pour ta réponse, et surtout pour ton explication. Effectivement, cela fonctionne !!!

En cherchant de mon côté, je me suis rendu compte que cela fonctionnait uniquement en mettant un COMMENTAIRE CONDITIONNEL, et en lui liant un fichier ie-only.css. Même si ce fichier est vide. c'est à n'y rien comprendre

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="container">
		<div id="shadow_top">
		<!--[if lte IE 6]>
			<link href="ie-only.css" rel="stylesheet" type="text/css" />
		<![endif]-->
		</div>
 
		<div id="shadow_left">
		</div>
 
		<div id="shadow_middle">
 
               . . .

Je te remerci encore pour ta réponse, si tu a compris pour le truc du commentaire, tu peut toujours répondre, même si le sujet est en résolu.

Cordialement,

celas

**Candygirl** · 20/07/2009, 17h02

Bah en faite je n'ai pas de réponse précise au phénomène.

J'ai déjà constaté dans certains cas, sur IE6, que de mettre des commentaires html (pas besoin d'un commentaire conditionnel) permet de donner un statut de "rien du tout" et j'imagine que c'est ce qui se passe là. Un rien du tout qui suppose donc même plus le min-height d'un line-heigh que s'impose IE6.

Il n'y a rien besoin de mettre de particulier dans le commentaire pour que cela fonctionne. En ce sens le minimum:

Code html :

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