[HTML] Opera 8.50 et problemes d'overflow

Version imprimable

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:

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:

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?

10/09/2007, 20h10
Bisûnûrs
Utilise un DOCTYPE complet et valide pour faire passer ton navigateur en mode standard.

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

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

merci bisûnûrs, mais ca ne marche pas, ou je me suis trompé quelque part? voila le nouveau code:

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
 
<!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?

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

Rajoute simplement height="100%" au td contenant le div en position relative et normalement ça devrait marcher.
10/09/2007, 22h09
lysandre

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??
10/09/2007, 22h15
Bisûnûrs
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:

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.
10/09/2007, 22h38
lysandre

ca me parait logique, mais je ne vois pas le rapport avec la barre de défilement qui ne s'affiche pas...

Dans mon code entier, j'ai trouvé le probleme: apparemment les barres de défilement n'apparaissent pas nom plus si la propriété topmargin de body est définie.

Donc maintenant ca marche, néanmoins, quand je réactualise la page les barres de défilement disparaissent tout de meme.
10/09/2007, 22h49
Bisûnûrs

Si le texte est affiché, je ne vois pas pourquoi les scrollbar ne le seraient pas .. :/

Tu peux joindre l'ensemble de ton code dans un fichier ou mettre la page en ligne, qu'on puisse se rendre compte avec un code complet, étant donné que le code simplifié ne suffit plus ?

Ni le texte ni les scroll ne s'affichent. Mais le code simplifié suffit (avant le code entier ne marchait pas a cause de la propriété topmargin de body), les deux codes marchent quand on charge la page mais ne marchent plus quand on réactualise.

Je remet ici le code simplifié qui ne marche pas avec les height="100%" rajoutés sur les td. Suffit de copier-coller pour vérifier.

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 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 height="100%">
 
<table width="100%" height="100%">
<tr>
<td height="100%">
<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>

Bisûnûrs, depuis que j'ai mis un doctype dans ma page j'ai des comportments étonnants.

-Dans IE ma page html depasse largement de la fenetre en hauteur alors que ce n'etait pas le cas avant et qu'elle doit theoriquement etre a 100%

-Dans Netscape et Firefox dans le code suivant valign ne marche pas pour le tableau qui contient "message":
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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style>  </style> </head> <body> <table height="100%" width="100%" border="0" cellspacing="0" cellpadding="0"><tr> <td height="100%"> <div style="position:relative; left:0px; top:0px; width:100%; height:100%; z-index:1;"> <div style="position:absolute; width:100%; height:100%; background-color:#00AAFF;"> <table width="100%"; height="100%" cellspacing="0" cellpadding="0" border="0"><tr><td width="100%"; height="100%" align="center" valign="middle"> message </td></tr></table> </div> <table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%"><tr> <td height="100%" bgcolor="#FF9933">  </td></tr> </table> </div>  </td></tr></table> </body> </html>
Et il faut y ajouter que ce code ne marche toujours pas pour la barre de défilement quand on réactualise dans opera...

11/09/2007, 09h13
Bisûnûrs
Là personnellement je ne vois pas comment résoudre ton problème.

Pour les marges en trop, il suffit de mettre
Code:

1 2 3 4 *{ margin:0; padding:0; }
au début de ton CSS.

Sinon, ton code a l'air bien compliqué pour pas grand chose .. Tu es bien sûr d'avoir besoin de tous ces tableaux pour la mise en forme ? Parce que je suis certain qu'il y a moyen de se débrouiller juste avec du CSS et sans tableau pour le rendu que tu souhaites avoir.
11/09/2007, 10h37
lysandre

Si dans IE la page depasse largement de la fenetre de navigation ce n'est pas a cause des marges (je les ai deja mises a 0). Depuis que j'ai rajouté height=100% pour body et html, on dirait que IE considere que 100% ca fait plus que la taille de la fenetre...

Pour le dernier code avec valign ce qui est tres bizarre est que c'est le code minimal pour voir apparaitre la probleme. Si on enleve un seul des element qui s'y trouvent, plus de probleme.

C'est pour ca que je n'avais pas mis de doctype au depart. Il parait que c'est sencé mettre tout a la meme norme et pourtant c'est ce qui provoque plein de différences entre navogateurs et comportement etranges...enfin, d'apres mon expérience pas si longue que ca...:)

En fait j'ai besoin des tableaux pour plusieurs raisons:
-avec des tailles en pourcentage, quand rétrécit la fenetre les cellules du tableau ne sont pas infiniment incompressibles, et prennent une taille minimum an fonction de leur contenu. Ca evite des chevauchements et autres comportments bizarres
-les vieux navigateurs comme Netscape 4.8 on du mal avec les div quand on donne des tailles et positions en %. Donc en php je veux produire un code avec un minimum de changements a faire selon le navigateur, donc un minimum de balises div avec positions et tailles en %
-je ne sais pas du tout comment se comportent les navigateurs sous mac et linux, et j'ai un peu peur de ca. J'avais l'impression que les tableaux etaient mieux traités par les navigateurs...
11/09/2007, 11h05
Bisûnûrs

La proportion des personnes utilisant Netscape toutes versions confondues n'excède plus les 0.2% à l'heure actuelle, donc celle qui utilise la version 4.8 doit être quasi nulle ..

Faire un site intégralement en % et en plus avec des tableaux est tout aussi contraignant parce que gérés souvent très différemment selon les navigateurs (surtout anciens).

Je ne peux pas t'aider plus que ça concernant ton problème, désolé.
11/09/2007, 11h07
lysandre

Ok, merci pour ton aide bisûnûrs!

En fait peut-etre que tu as raison, un site en % pose trop de problemes de compatibilité. Peut-etre vais-je donne la possibilité aux visiteur de regler eux-meme la taille du site dans la page avec php (je ne connais pas de fonction ou variable php qui donne la taille de la fenetre de navigateur)