Problème de redimensionnement sous IE

**Madfrix** · 04/12/2008, 12h13

Bonjour à tous

Tout d'abord voici mon code :

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>CSS Frames</title>
	<style type="text/css" media="screen,print">
body,
html{
	height: 100%;
	width: 100%;
	background:#aaaaaa;
	margin:0;
	padding:0;
}
 
body {
	min-width:720px; 
}
 
div#content{
	min-height: 100%;
  	height: auto;
  	height: 100%;
  	width: 720px;
  	margin: 0 auto;
  	padding: 0;
	background-color: orange;
}
 
div#headerwrap {
	position:absolute;
	width:100%;
	top:0;
	left:0;
	height:50px;
}
 
body>div#headerwrap {
	position:fixed;
}
 
div#header {
	height:50px;
	width:720px;
	margin:0 auto;
	background:#333333;
}
 
div#footerwrap {
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	height:50px;
}
 
body>div#footerwrap {
	position:fixed;
}
 
div#footer {
	height:50px;
	width:720px;
	margin:0 auto;
	background:#333333;
}
 
div#test {
float: left;
display: inline;
margin: 65px 0px 15px 15px;
width: 190px;
height: 500px;
background-color:white;
}
 
<!--[if IE 6]>
html {
    overflow:hidden;
}
 
body {
      overflow:auto;
}
<![endif]-->
 
</style>
 
<script type="text/javascript">
<!--
 
function resizeListe(){
var hauteurDiv = 0;
var obj = document.getElementById('test');
hauteurDiv =  document.getElementById('content').offsetHeight - document.getElementById('header').offsetHeight - document.getElementById('footer').offsetHeight - 30;
obj.style.height = hauteurDiv + "px";
}
 
//-->
</script>
 
</head>
 
<body onResize="resizeListe();">
 
 
<div id="content">
 
<div id="test">
 
</div>
 
</div>
 
	<div id="headerwrap">
		<div id="header">
		</div>
	</div>
 
	<div id="footerwrap">
		<div id="footer">
		</div>
	</div>
 
<script type="text/javascript">
<!--
 
resizeListe();
 
//-->
</script>
 
</body>
</html>

Le but étant de faire une page HTML avec une entête et un pied de page fixes ainsi qu'un div qui se redimensionne automatiquement lorsque l'utilisateur redimensionne sa fenêtre. Sous Firefox pas de problème le div se redimensionne bien. Par contre sous IE6 lors du redimensionnement, il apparaît quelque fois un décalage entre les entête, pieds de pages et mon div "content". Je pense qu'il existe un hack IE pour résoudre ce problème et j'aime pas trop utiliser de javascript pour palier à ce genre de problème...

Merci de vos conseils

PS : faites pas attention au couleurs c'est une page en cours de dev

PS2 : toute autre remarque est bonne à prendre sur le reste de mon code

**devyan** · 04/12/2008, 16h30

Envoyé par Madfrix

...
Par contre sous IE6 lors du redimensionnement, il apparaît quelque fois un décalage entre les entête, pieds de pages et mon div "content".
...

Salut,

Pourrais-tu être plus précis dans la description du "décalage" ?

**Madfrix** · 04/12/2008, 16h50

En fait parfois (pas tout le temps), il apparaît un décalage comme celui-ci sous IE:

J'avais pensé inclure dans ma fonction JS une instruction qui réaligne mon div sur mon header mais je pense que ce problème doit être connu et corrigeable par un hack mais je sais pas lequel...

PS: pour l'instant je teste sous IE6 seulement

**Madfrix** · 05/12/2008, 12h01

Bon finalement je m'en suis sorti car j'ai remarqué que lorsque mon problème de décalage arrivait sous IE, un reload de la page suffisait à remettre tout d'aplomb donc j'ai incorporé un reload de la page après mon redimensionnement

Code :

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

1
2
 
<body onResize="resizeListe(); window.location.reload();" scroll="no">

**devyan** · 05/12/2008, 12h46

Envoyé par Madfrix

Bon finalement je m'en suis sorti car j'ai remarqué que lorsque mon problème de décalage arrivait sous IE, un reload de la page suffisait à remettre tout d'aplomb donc j'ai incorporé un reload de la page après mon redimensionnement

Code :

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

1
2
 
<body onResize="resizeListe(); window.location.reload();" scroll="no">

Enfin bon si ça marche ...

**Madfrix** · 05/12/2008, 14h32

Oui je sais c'est pas forcément très clean mais c'est la seule solution que j'ai trouvé pour résoudre ce bug même si je pense qu'il existe un hack css pour cela...

Bidouille quand tu nous tiens...

Problème de redimensionnement sous IE

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager