Discussion :

[Seth77]

Slu

j'essaie de faire une page avec 5 boites un header, footer le contenu et une pour le menu et une derniere qui contient l ensemble, voila mon 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
	body {
		margin: 0;
		margin-top:10px;
		padding: 0;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.8em;
		background-color: #fff;
	}
 
	#conteneur {
		width: 970px;
		margin-left: auto;
		margin-right: auto;
	}
 
	#header {
		height: 50px;
		background-color: #99CCCC;
	}
 
	#menu {
		float:left;
		width: 150px;
		height: auto;
		background-color:#CCCCFF;
	}
 
	#frame {
		position:static;
		margin-left: 150px;
		width: auto;
		height: auto;
		background-color:#9999CC;
		min-height:700px;
		padding:10px;
	}
 
	#footer {
		height: 20px;
		background-color: #99CC99;
	}

le probleme est que sous FF cela marche bien mais sous IE le contenu de la boite frame et decalle en verticale en fonction du contenu de la boite menu ...

thx @+

[masu]

tres etrange ce decalage sous IE :/
En mettant ta frame en float:left; ca semble résoudre le probleme.
j'ai rajouté aussi un _height ce qui permet d'avoir l'equivalent du min-height sous IE.

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
	#frame {
		/*margin-left: 150px;*/
		width: 800px;
		height: auto;
		background-color:#9999CC;
		_height:700px;
		min-height:700px;
		padding:10px;
		float:left;
	}
	
	#footer {
		height: 20px;
		background-color: #99CC99;
		clear:both;
	}

[Seth77]

tres etrange ce decalage sous IE :/
En mettant ta frame en float:left; ca semble résoudre le probleme.
j'ai rajouté aussi un _height ce qui permet d'avoir l'equivalent du min-height sous IE.

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
	#frame {
		/*margin-left: 150px;*/
		width: 800px;
		height: auto;
		background-color:#9999CC;
		_height:700px;
		min-height:700px;
		padding:10px;
		float:left;
	}
	
	#footer {
		height: 20px;
		background-color: #99CC99;
		clear:both;
	}

merci je vais essaye ... cela sert a quoi le "_" devant height ? et cela sert a quoi clear ?

[masu]

La propriété height sous IE a en fait un comportement de min-height, en utilisant _height seul IE prend en compre une propriété "height" (height a la facon IE c'est a dire un min-height)

ensuite le clear both fait en sorte qu'un element block (ici ton footer) passe a la ligne quand des element positionnés avec float le precede.

[Seth77]

La propriété height sous IE a en fait un comportement de min-height, en utilisant _height seul IE prend en compre une propriété "height" (height a la facon IE c'est a dire un min-height)

ensuite le clear both fait en sorte qu'un element block (ici ton footer) passe a la ligne quand des element positionnés avec float le precede.

Merci !