Propriété overflow non prise en compte sous ie

Bonjour à tous, je suis en train d'intégrer un forum phpBB à mon site, jusque là aucun problème, mais horreur, lorsque je test sur ie j'ai des éléments qui débordent de mes div.

Pourtant j'ai mis dans une div ".postbody" (qui contient le message posté sur le forum) la propriété overflow:auto qui, lorsque les éléments dépassent 540px provoquent l'ajout d'une barre de scroll horizontale. Cependant ie ne semble pas tenir compte de cette propriété...

Regardez, testez sous Firefox puis sous ie
http://net-secure.fr/forums/viewtopic.php?p=1428#1430

J'ai essayé tout un tas de hack ie, javascript, etc mais rien à faire.

As-tu fixé une hauteur et largeur a ton div ?

Oui il y a une largeur (540px) et j'avais essayé de fixer une hauteur (d'abord une valeur auto puis ensuite en pixels) mais ça n'avait rien donné.

Hello,

Je ne sais pas si tu as remarqué, mais dans IE tu n'as pas d'élément ou de chaine de caractères dans ce bloc qui dépasserait les 540px.

Tu as une chaine de caractères longue (URL longue), et voici ce que font les différents navigateurs :
- IE réalise une césure après le premier point d'interrogation (de même que Safari 3b, semble-t-il) ;
- Opera ne réalise pas de césure après le premier point d'interrogation, mais après le premier underscore («_») ;
- Firefox ne réalise pas de césure.

Il n'y a donc que dans Firefox que l'on voit le width: ...; overflow: auto; en action, mais à priori ça marche pour tous les navigateurs.

Ok, mais mis-à-part ça je n'arrive pas à lui faire respecter (à IE) la taille de mes div, j'ai même essayé un "substitut" du fameux max-height avec du javascript, ça a réduit le débordement mais ne l'a pas complètement supprimé.

Si quelqu'un a une solution parce que là je commence à désespérer, j'ai aussi posté mon problème sur le site du zéro et je n'ai malheureusement eu aucune réponse.

En tout cas merci à ceux qui s'intéressent à mon problème.

Bah pour le reste ton Doctype est incomplet et fait passer les navigateurs en mode Quirks, donc ça n'aide pas. Et tu as un commentaire conditionnel qui contient uniquement une balise fermante </style> (ouverte nulle part à vue de nez...), tu utilises une syntaxe XHTML mais la page est déclarée en HTML, etc.

Bref, quelques petites corrections à faire, valider le code, passer en mode Standard (doctype complet, avec URL de la DTD), et on verra ce que ça donne à ce moment là.

Je sais que mon code n'est pas valide, mais le problème ne vient pas de là, de plus sur firefox ça marche

Bonjour, j'ai le même genre de problème et je dois dire que je ne comprends pas très bien ce qui ne va pas.

Sur la page http://caractereschinois.free.fr/test.php je n'ai pas d'erreur de syntaxe d'après le validateur suivant :
http://validator.w3.org/check?uri=http%3A%2F%2Fcaractereschinois.free.fr%2Ftest.php

Par contre j'ai un affichage horrible du overflow sous IE 7 alors que tout roule pour Opéra et Firefox.

Quelqu'un a une idée ?

Merci d'avance

figo a écrit :
Par contre j'ai un affichage horrible du overflow sous IE 7 alors que tout roule pour Opéra et Firefox.

Je ne sais pas si ça vient du overflow:auto sur le conteur, ou des position:relative des différents éléments, ou du width: 100% (à priori inutile?) sur ces éléments, ou d'une combinaison de tout ça.

Mais globalement, je commencerais par te déconseiller d'utiliser une barre de défilement interne lorsque ça n'est pas directement nécessaire. Pour l'ergonomie et l'accessibilité, c'est une erreur de conception.

Merci pour ta réponse,

Effectivement le problème vient de positoin:relative qui fixe définitivement (indépendamment du défilement) la position des divs qui sont dans la liste sous IE et pas sous firefox.

Cependant si je l'enlève je n'ai plus mes jolis coins arrondis (Je n'ai jamais vraiment bien compris pourquoi mais si on met des position absolute dans un conteneur où on ne définit pas explicitement position:relative les références relatives sont assez surprenantes.

J'ai mis à jour http://caractereschinois.free.fr/test.php pour ceux qui voudraient comparer avec et sans position: relative, le prix à payer est bien l'arrondi des coins sous IE, pourquoi est-il si méchant à chaque fois ???

Des idées ?

PS : sur cet exemple l'utilité du défilement ne saute pas aux yeux mais en pratique ce fichier est généré automatiquement et la liste peut être très longue et je ne souhaite pas voir ma page étirée à l'infini.

Pour ce qui est des position:absolute qui ne marchent pas si on ne définit pas explicitement un position: relative avant voilà ce dont je me suis aperçu :

<div id="div2" style="position:relative">
<div id="div2" style="position:absolute;bottom:0"></div>
</div>

Place div2 en bas de div1.

Par contre :

<div id="div2">
<div id="div2" style="position:absolute;bottom:0"></div>
</div>

place div2 en bas de la page !

Cela ne se voit pas trop sur mon exemple par ce qu'on a du blanc et transparent sur blanc mais dans le deuxième exemple (où j'ai supprimé les relative), mes coins se retrouvent tous aux quatre coins de la page et non aux quatre coins de mon div !!

Des idées pour concilier ceci avec la barre de défilement ?

Vous aurez compris, le premier div s'appelle "div1" dans mon exemple