IE Div qui ne se termine pas

**Necho** · 12/06/2009, 11h13

Bonjour à tous !

J'ai un petit problème avec IE7 (étonnant non?). En faite le template est relativement simple avec un header et un cadre qui s'adapte à la résolution de l'écran. Dans ce cadre, j'utilise une librairie Javascript (Jquery) et j'utilise le plugin layout pour gérer l'interface avec un système de zone (deux zones dans l'exemple, une centrale et une à gauche pour le menu). Voici une capture de ce que ça donne sous Firefox :

Pièce jointe 48455

Sur Internet Explorer, le cadre ne se termine pas...Du coup, je charge du contenu, si celui ci dépasse la taille de mon cadre, il se chargera mais ne s'occupera pas de la hauteur et je n'aurai pas de scroll vertical. Voici une capture :

Pièce jointe 48456

Voici le code de mon index.php :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.layout.js"></script>
	<script type="text/javascript" src="ui.core.js"></script>
	<script type="text/javascript" src="ui.draggable.js"></script>
	<script type="text/javascript" src="ui.sortable.js"></script>
	<script type="text/javascript" src="effects.core.js"></script>
	<script type="text/javascript" src="effects.slide.js"></script>
	<script type="text/javascript" src="effects.drop.js"></script>
	<script type="text/javascript" src="effects.scale.js"></script>
	<script type="text/javascript" src="layout.js"></script>
	<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="layout.css" />
</head>
 
<body>
	<div id="main">
 
		<div id="header">
		</div>
 
		<div id="cadre">  
		  <div class="outer-west">Zone gauche</div>
 
		  <div class="outer-center">
		    <div class="middle-center">   
		      <div class="inner-center" id="cadre-center">
          Zone centrale
          </div> 
		    </div>
		  </div>
		</div>
 
	</div>
 
</body>
</html>

Le main.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
 
body,html
{
	overflow:hidden;
	font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
	cursor:default;
}
 
#main
{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	height:auto;
	width:auto;
	background-color:#0065BD;
	border:2px solid #FEBF00;
}
 
#main #header
{
	height:85px;
}
 
#main #cadre
{
	position:fixed;
	top:85px;
	left:10px;
	bottom:8px;
	right:8px;
	background-color:#fff;
}

et le layout.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
.ui-layout-pane 
{
	padding:3px; 
	padding-top:0px;
	background:#FFF; 
	border:1px solid #BBB;
}
 
.ui-layout-pane-north ,	.ui-layout-pane-south 
{
	border:1px solid #BBB;
} 
 
.ui-layout-pane-west 
{
	padding-left:0px;
	padding-right:0px;
}
 
.ui-layout-pane-east 
{
 
}
 
.ui-layout-pane-center 
{
 
} 
.inner-center 
{
	border:1px solid #BBB;
	overflow:auto;
}
 
.outer-west ,	.outer-east 
{
	background-color:#EEE;
}
 
.middle-west ,	.middle-east 
{
	background-color:#F8F8F8;
}
 
.ui-layout-resizer 
{
	background:#DDD; 
}
 
.ui-layout-resizer:hover 
{ 
	background:#FED; 
}
 
.ui-layout-resizer-west 
{
 
}
 
.ui-layout-resizer-east 
{
 
}
 
.ui-layout-toggler 
{
	background:#AAA; 
}
 
.ui-layout-toggler:hover 
{
	background:#FC3; 
} 
 
.outer-center , .middle-center 
{
	padding:0; 
	border:0; 
} 
 
.inner-center a
{
 
}