Problème de mise en page sous IE6

**link256** · 19/10/2009, 15h34

Bonjour,

je rencontre actuellement un problème sous IE6, un parmis tant d'autres vous me direz

Le premier screen correspond à Firefox et le second à IE6

J'ai 3 div

les 2 première divs doivent prendre toute la hauteur de la fenêtre dans une proportion 75% et 25% avec une largeur en auto qui doit prendre ce qui est laissé par la troisème div qui à un width à 200 px et toute la hauteur de la fenêtre.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<STYLE type="text/css">
div#princ{
	background-color: #FF5555;
	position: absolute;
	top: 0px;
	bottom: 25%;
	left: 0px;
	right: 200px;
	width: auto;
}
 
div#droite{
	background-color: #55FF55;
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 0px;
	width: 200px;
	height: 100%;
	overflow-y :scroll;
}
 
div#bas {
	background-color: #5555FF;
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 200px;
	top: 75%;
	width: auto;
	height: 25%;
	overflow-y :scroll;
}
</STYLE> 
 
</head>
<body>
	<div id="princ"> Contenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbhaContenu principal après, blah blah lbha</div>
 
	<div id="droite">Contenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbhaContenu droite après, blah blah lbha</div>
	<div id="bas">Contenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbhaContenu bas après, blah blah lbha</div>
 
	</body>
</html>

j'ai tenté de joué sur le doctype, le z-index modifier le right 200 px

Mais je n'y arrive toujours pas

Si quelqu'un à une idée ou une piste je suis preneur.

Merci,

**sebhm** · 19/10/2009, 16h13

Bonjour,

pour notre copain IE 6, il faut parfois lui expliquer lentement les choses, et lui préciser que la body fait 100% en hauteur : cf. faq

j'ai le meme comportement pour la largeur (sous IETester, je sais pas si normal) donc je précise 100% en hauteur et largeur pour le body.

De plus, si tu fais une bande à droite de 200px, tu ne sais pas combien fait tes div à gauche, car ca dependra de la résolution. Aussi, je préfere les %.

voici mon CSS qui reproduit la meme chose pour FF, IE6 et 7

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
body {
  height : 100%;
  width : 100%;
}
div#princ{
	background-color: #FF5555;
	position: absolute;
	top: 0px;
	bottom: 25%;
	left: 0px;
	right: 200px;
	width: auto;
	height : 75%;
	width : 75%;
}
 
div#droite{
	background-color: #55FF55;
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 0px;
	width: 25%;
	height: 100%;
	overflow-y :scroll;
	margin : 0;
}
 
div#bas {
	background-color: #5555FF;
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 200px;
	top: 75%;
	width: auto;
	height: 25%;
	overflow-y :scroll;
  width : 75%;
}

**link256** · 19/10/2009, 17h40

Je vais tester ca et je te tiens au courant merci,

Je ne peux helas fixer la largeur de la div de droite à 25%.

J'ai une application composée de frameSet (pas mon choix ^^) avec un menu sur la gauche ainsi que des bordure en haut et en bas

il reste la partie exstente que j'ai présenté qui contient des news mis à jours via Ajax d'une largeur de 200px ainsi qu'un background sur la div centrale adapté à la résolution de l'utilisateur.

On me demande maintenant de rajouter la divBas avec la contrainte de 25% de hauteur et prenant toute la largeur.

Via javascript je voulais réécrire le width de la div mais ca n'a pas l'air d'etre pris en compte.

Problème de mise en page sous IE6

CSS

Discussions similaires

Partager

Partager