[HTML] Opera 8.50 et problemes d'overflow

**lysandre** · 10/09/2007, 19h57

Bonjour!

J'ai un probleme avec Opera version 8.50 qui ne comprends pas "overflow:auto" mais qui a aussi des prblemes avec "overflow:scroll"

le code suivant pose probleme. Non seulement les barres de défilement ne sont pas affichées mais le texte n'est pas non plus affiché:

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
 
<html>
<head>
</head>
<body>
 
<table height="100%" width="100%"><tr>
<td>
 
<table width="100%" height="100%">
<tr>
<td>
<div style="position:relative; width:100%; height:100%;">
<div style="position:absolute; width:100%; height:100%; overflow:scroll;">
 
 
dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds
<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>
dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds
<br>dsdsds<br>dsdsds<br>dsdsds<br>dededededsdsds<br>dsdsds<br>
dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds
<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>
dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>
dsdsds<br>dsdsds<br>dsdsds<br>dededede
 
</div>
</div>
</td></tr>
</table>
 
</td></tr></table>
 
</body>
</html>

Ce qui est assez etonnant est que le meme code marche si on enleve le table extérieure (la table extérieure n'est pas la pour faire joli, le code que je vous montre ici est une simplification extreme de mon code dans lequel on ne peut pas se passer de cette table extérieure):

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
 
<html>
<head>
</head>
<body>
 
<table width="100%" height="100%">
<tr>
<td>
<div style="position:relative; width:100%; height:100%;">
<div style="position:absolute; width:100%; height:100%; overflow:scroll;">
 
dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds
<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>
dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds
<br>dsdsds<br>dsdsds<br>dsdsds<br>dededededsdsds<br>dsdsds<br>
dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds
<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>
dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>
dsdsds<br>dsdsds<br>dsdsds<br>dededede
</div>
</div>
</td></tr>
</table>
 
</body>
</html>

Avez-vous une explication?

**Bisûnûrs** · 10/09/2007, 20h10

Utilise un DOCTYPE complet et valide pour faire passer ton navigateur en mode standard.

Puis mets ça au début de ton CSS :

Code css :

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

1
2
3
html, body{
   height:100%;
}

**lysandre** · 10/09/2007, 21h02

merci bisûnûrs, mais ca ne marche pas, ou je me suis trompé quelque part? voila le nouveau 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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
<style>
<!--
html, body{
   height:100%;
}
-->
</style>
</head>
<body>
 
 
 
<table height="100%" width="100%"><tr>
<td>
 
<table width="100%" height="100%">
<tr>
<td>
<div style="position:relative; width:100%; height:100%;">
<div style="position:absolute; width:100%; height:100%; overflow:scroll;">
 
 
dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds
<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>
dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds
<br>dsdsds<br>dsdsds<br>dsdsds<br>dededededsdsds<br>dsdsds<br>
dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds
<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>
dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>dsdsds<br>
dsdsds<br>dsdsds<br>dsdsds<br>dededede
 
</div>
</div>
</td></tr>
</table>
 
</td></tr></table>
 
 
</body>
</html>

Ou peut-etre le doctype n'est pas bon?

**Bisûnûrs** · 10/09/2007, 21h13

Rajoute simplement height="100%" au td contenant le div en position relative et normalement ça devrait marcher.

**lysandre** · 10/09/2007, 22h09

Avec le height=100% ca marche dans mon exemple, mais seulement quand on charge la page...bizarrement quand on réactualise la page, ca ne marche plus!!
De plus avec mon code entier, ca ne marche pas du tout.

Je ne comprends pas tres bien le truc...faut-il préciser tout les height de toutes les balises qui ont cet attribut? Pourquoi?

J'essaye de trouver quelle est la forme minimale de mon code telle que ca ne marche pas, et je la poste.
Par contre comment résoudre le probleme quand on reactualise la page??

**Bisûnûrs** · 10/09/2007, 22h15

Quand tu utilises des height en pourcentage, pour que ça fonctionne, il faut que l'élément parent auquel tu mets le height en pourcentage ait un height défini, que ce soit en pourcentage ou en taille fixe.

Donc si tu fais comme ça :

Code :

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

1
2
3
<body>
<div style="height:100%;background:red"></div>
</body>

sans avoir défini la hauteur du body, le div ne prendra pas toute la hauteur parce que son élément parent n'a pas de hauteur définie. C'est pareil pour les éléments imbriqués.

[HTML] Opera 8.50 et problemes d'overflow

HTML

Vue hybride

Discussions similaires

Partager

Partager