overflow:auto et IE/Mac

[kozlika]

Bonjour,

Je suis en train de m'essayer à la création d'un thème en trois colonnes pour l'outil de blog DotClear.

J'ai tâché de mettre en forme toutes les balises les plus usuelles mais je rencontre un problème avec la balise pre sur laquelle j'aimerais mettre un overflow auto à cause des lignes parfois très longues. Je crois avoir essayé avec succès dans la plupart des navigateurs que j'avais sous la main et cela semble bien se passer partout, sauf avec Internet Explorer 5.2 sous Mac, où le contenu de la balise disparaît purement et simplement

On peut voir le thème là :

Keepsake pour DotClear

et le billet où j'ai essayé les balises ici :

Mise en forme des balises

Savez-vous comment je peux corriger ce bug ?

Par ailleurs si l'un d'entre vous voit des bugs quelque part, ça serait sympa de me faire remonter l'info (je n'ai pas pu essayer IE5 sous Windows par exemple). Les avis et suggestions sont aussi les bienvenus...

[Monique]

Bonjour,

L'élément pre est de type inline or la propriété overflow ne s'applique à ce type d'élément... donc tes essais ne devraient fonctionner avec aucun navigateur

[kozlika]

Euh... si, si, ça marche bien (à part dans IE5) avec ça :

code, pre { 
font-family : "Courier New",monospace; 
font-size : 1.1em; 
margin : 0 auto; 
background : #f7f7f7;
 }
pre { 
display:block;
width: 90%; 
overflow : auto; 
margin-bottom : 1em; 
padding : 0.5em;
}

[LaurentDenis]

Les bugs d'IE5 Mac sur l'overflow sont expliqués ici : http://www.l-c-n.com/IE5tests/overflow/

Mais il semble que celui-ci n'ait pas de solution... Sauf peut-être (non-testé):

http://www.sam-i-am.com/work/sandbox/css/o...w-auto-fix.html

[LaurentDenis]

L'élément pre est de type inline

Heu... <pre> est un élément bloc. C'est son contenu qui ne peut être que inline.

(L'équivalent inline de <pre> est <code>)

[Monique]

Oups...

J'ai lu les spécifications trop vite et j'ai raté une occasion de me taire

[Guest meta nando]

Salut kozlika,

Par ailleurs si l'un d'entre vous voit des bugs quelque part, ça serait sympa de me faire remonter l'info (je n'ai pas pu essayer IE5 sous Windows par exemple). Les avis et suggestions sont aussi les bienvenus...

Tests avec IE5.5/Win98 => Problème!

J'ai affiché la page Keepsake pour DotClear: pas de problème apparent.

Puis j'ai affiché la page du billet Mise en forme des balises: idem, pas de problème apparent.

Puis j'ai cliqué sur la commande Précédent et plouf, plus rien, page vide... j'ai rechargé la page, et je vois le code HTML non interprété, qui commence seulement à partir des balises <LINK>! Problème avec PHP?

[kozlika]

Merci Meta Nando : non, je devais être en train de bidouiller dans la page, tout simplement.

Bon, pas réussi à trouver un truc qui marche donc j'ai triché comme ça :

pre { 
margin : 0 auto; 
margin-bottom : 1em; 
padding : 0.5em; 
text-align:left;
white-space:normal;
/* caché pour IE 5 Mac qui sait pas faire \*/
white-space:pre;
width: 90%; 
overflow : auto; 
}
/* End hack */

C'est ce que j'ai trouvé de mieux pour l'instant...