Hauteur sous IE dans un div ne respectant pas le height

**cuber** · 05/10/2006, 17h22

Bonjour,
une fois n'est pas coutume mon meilleur ami IE n'affiche pas comme son ami Firefox ceci:
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
 
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>
<div id="page">
	<div id="partieGauche">
	gauche
	</div>
	<div id="partieHaut">
	haut
	</div>
	<div id="partieMilieu">
	milieu
	</div>
	<div id="partieBas">
	Bas
	</div>
 
</div>
</center>
</body>
</html>

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
56
57
58
59
60
 
body {
margin: 5px 0 0 5px;
padding: 0;
 
}
 
div#page
{
 
	background-color:purple;
	margin:auto;
 
	width:1000px;
	height:100%;
 
 
}
div#partieGauche
{
	width: 200px;
	height: 97%;
	background-color: red;
	float:left;
 
 
 
 
}
 
div#partieHaut
{
		width: 800px;
		height: 7%;
		background-color:yellow;
 
		float:left;
 
 
}
 
div#partieMilieu
{
		width: 800px;
		height:90%;
		background-color: green;
		float:left;
 
 
 
}
 
div#partieBas
{
		width:1000px;
		height:3%;
		background-color:black;
		clear:both;
 
}

Donc sous firefox les propriétés height sont respectées mais pas sous IE qui fixe la hauteur de la div selon ce qu'elle contient.

Une astuce pour contourner ce problème?
P.S: Je ne dois pas fixer la hauteur mais je dois la laisser en pourcentage.

**Candygirl** · 05/10/2006, 17h29

Ces 2 choses devraient t'aider:

- Mettre un doctype valide tout en haut de ton document

Tu verrais alors que FF adopte maintenant le même résultat que IE.

- ajouter

Code :

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

html,body {height:100%;}

en haut de ton css

**cuber** · 05/10/2006, 17h41

J'ai rajouté dans le html

Code :

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

1
2
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Mais cela ne change rien à Firefox (l'affichage est correct).

Et j'ai ajouté dans le css:

Code :

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

html,body {height:100%;}

Mais cela n'a aucun effet.

Sinon je vais me renseigner sur le doctype, j'ai pris la mauvaise habitude de ne pas le mettre...

**Candygirl** · 05/10/2006, 17h53

Avec le doctype complet:

Code :

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Tu devrais voir la différence

**cuber** · 05/10/2006, 20h02

Ok en effet le résultat est le même.
Maintenant il me reste à résoudre le problème originel qui intervient maintenant sous Firefox et IE

....

**Candygirl** · 05/10/2006, 20h39

Envoyé par Candygirl

- ajouter

Code :

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

html,body {height:100%;}

en haut de ton css

**cuber** · 05/10/2006, 20h45

c'est fait mais ça ne change rien...Je me penches dessus si je trouve je poste la solution.

EDIT: Erf, ça marche sous ie mais pas sous firefox

**Candygirl** · 05/10/2006, 21h18

Envoyé par cuber

c'est fait mais ça ne change rien...Je me penches dessus si je trouve je poste la solution.

EDIT: Erf, ça marche sous ie mais pas sous firefox

AH oui, oups, j'oubliais que ta balise center doit être virée. Elle est dépréciée depuis html 4.01 et c'est elle le problème. elle est entre ton body et ton div sans hauteur définie du coup les 100% de ton div prenne les 100% de la hauteur de ta balise center qui n'est pas définie. Donc vire-là et ça devrait être bon cette fois

**cuber** · 06/10/2006, 00h38

Bon j'avoue je suis bluffé......et moi qui pensait que le doctype servait à rien....

La balise center je l'avais mise à cause d'IE qui ne voulait pas prendre en compte les margin: auto .....

Bon je vais me trouver une doc sur le doctype et html 4...et moi qui pensait bien avoir assimilé les bases de CSS....

En tous cas merci de ton aide!

Hauteur sous IE dans un div ne respectant pas le height

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager