pb de positionnement de div

**123quatre** · 29/08/2007, 13h36

bonjour [biggrin]

je suis buté à un problème de positionnement de div, 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
 
	<div id="haut">
			<div id="coinHG">
			</div>
			<div id="milieuH">
			</div>
			<div id="coinHD">
			</div>
		</div>
		<div id="contenu">
		</div>
		<div id="bas">
			<div id="coinBG">
			</div>
			<div id="milieuB">
			</div>
			<div id="coinBD">
			</div>
		</div>		
 
	<div id="bordureD">
	</div>

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
 
*{
margin:0;
padding:0;
}
 
 
#general{
float:left;
}
 
 
#coinHG, #coinHD, #coinBG, #coinBD {
height:13px;
width:6px;
float:left;
}
 
#haut, #bas{
width:612px;
height:13px;
}
 
#coinHG{
background-image:url(images/coinHG.jpg);
background-repeat:no-repeat;
}
 
#milieuH{
width:600px;
height:13px;
background-image:url(images/milieuH.jpg);
background-repeat:repeat-x;
float:left;
}
 
#coinHD{
background-image:url(images/coinHD.jpg);
background-repeat:no-repeat;
}
 
#contenu{
width:612px;
height:500px;
background-color:#b8b485;
}
 
#coinBG{
background-image:url(images/coinBG.jpg);
background-repeat:no-repeat;
}
 
#milieuB{
width:600px;
height:13px;
background-image:url(images/milieuB.jpg);
background-repeat:repeat-x;
float:left;
}
 
#coinBD{
background-image:url(images/coinBD.jpg);
background-repeat:no-repeat;
}
 
#bordureD{
width:6px;
height:582px;
background-image:url(images/bordureD.jpg);
float:left;
}

Sous ie , il y a un espace blanc entre le contenu et la div haut, dont je ne comprends pas lexistence. Avec firebug j'ai remarqué que le div milieuH est a lorigine de ce décalage et qu'il n'a pas la hauteur que je lui ai fixé, et aucune modification à ce niveau là n'a d'effet sur l'affichage. voilà un imprim ecran pour mieu comprendre.

sincèrement

**trotters213** · 30/08/2007, 08h55

En déclarant un doctype sous IE 7 je n'ai aucun souci désolé, tu utilises IE 6 ?

**Candygirl** · 30/08/2007, 09h56

IE n'accepte pas une hauteur de div inférieur au line-height calculé à partir du font-size. Tu peux, par exemple, attribuer un font-size de 0 ou alors un overflow:hidden qui cachera le dépassement qui s'affiche actuellement.

**123quatre** · 30/08/2007, 12h38

bonjour,

En déclarant un doctype sous IE 7 je n'ai aucun souci désolé, tu utilises IE 6 ?

je fais mes test sous ie6 et ie7 (je fais de la production de site à la chaine

)

peux tu me dire en quoi le doctype influe sur ma mise en page ?

IE n'accepte pas une hauteur de div inférieur au line-height calculé à partir du font-size. Tu peux, par exemple, attribuer un font-size de 0 ou alors un overflow:hidden qui cachera le dépassement qui s'affiche actuellement.

tu vois bien dans l'image je n'ai saisie aucun texte dans le div, et pourtant ie crée ce dépassement, je ne vois pas le rapport avec le texte. En plus ce "bug" m'a l'air d'apparaitre aléatoirement car j'ai coder la même structure de divs et j'ai pas eu ce problème.

**trotters213** · 30/08/2007, 12h43

Envoyé par 123quatre

peux tu me dire en quoi le doctype influe sur ma mise en page ?

http://xhtml.developpez.com/faq/?pag...octype_utilite

**123quatre** · 30/08/2007, 12h47

merci, en effet il faut que je reprenne les bonnes habitudes

cependant si Candygirl ou quelqu'un d'autre pouvait m'éclaicir sur ma remarque ce serait une épine en moins.

**Candygirl** · 30/08/2007, 13h17

Envoyé par 123quatre

tu vois bien dans l'image je n'ai saisie aucun texte dans le div, et pourtant ie crée ce dépassement, je ne vois pas le rapport avec le texte.

Oui, oui, je vois bien; j'ai mis mes lunettes

Moi non plus je ne vois pas le raport avec le texte; cette question n'est pas à me poser à moi mais à Microsoft... Le fait est que la hauteur min du div sur IE6 est celle du line-height qu'il y ait du texte ou pas. Par défaut le font-size en taille normal est 16, donc la hauteur min. d'un div autour de 19px. Vu que tu as 13px tu as 6 pixels de dépassement en haut comme en bas.

As-tu testé mes propositions ?