IE Div qui ne se termine pas
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:
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:
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:
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
{
} |
Pièce jointe 48457
