28173 sujets

CSS et mise en forme, CSS3

IE7 : overflow ne passe pas [Résolu]

Bonjour,
J'ai créé une page avec des balises <pre> pour y insérer des morceaux de code source, et les overflow sur IE7 ne marchent pas.

J'ai regardé sur ce forum les problèmes sur l'overflow et IE7 mais n'ai pas trouvé de réponse à mon souci ...

j'ai une balise <pre> stylée ainsi :

pre
{
	width:80%;
	margin:2em auto;
	overflow:auto;
	font-size:1.1em;
}

elle a donc une largeur fixée, et des marges pour la centrer (j'ai viré les couleurs, les background pour plus de lisibilité).
Son conteneur, qui est le corps central de la page, est ainsi :


#content
{
	position:absolute;
	left:210px;
	top:110px;
	padding:2.5em 1.5em;
}


sachant qu'il est contenu dans le <body> qui a une largeur de 100% et 0 en margin et padding :


body
{
	margin:0;
	padding:0;
	padding-top:1em;
	position: relative;
	width:100%;
}


en clair, le squelette de la page :

<body>
    <div id="page">
        <div id="content"> blabla + la balise <pre></div>
        <div id="menu"></div>
    </div>
</body>


est-ce que c'est parce que le content n'a pas de largeur fixée que l'overflow (qu'il soit auto ou scroll, d'ailleurs) ne marche pas ?
Le souci c'est que je ne connais pas la largeur du #content, vu que je lui demande juste de laisser 200px à gauche pour le menu.

Je précise que sous IE6 et firefox, il n'y a aucun souci, visiblement c'est juste pour IE7 ...

Si vous avez qq éclaircissements, je vous en remercie !
Modifié par Malcolm (25 Aug 2007 - 15:39)
Bonjour Malcolm,
pour commencer ce n'est pas l'élément pre que tu dois utiliser pour du code source mais code. Le pre est fait pour les texte préformatés.

A priori ton problème pourrait venir du fait que tu n'as pas spécifié de hauteur
sur ton élément pre.
le width:100% ne sert à rien ici puisque les éléments de block prennent
toute la largeur disponible par default (width:auto).
Modifié par Hermann (25 Aug 2007 - 13:04)
Salut,
<pre> ou <code> même <blockquote> je pense que le souci d'affichage n'est pas propre à la balise mais à une propriété CSS.

Je vais changer pour du <code> alors, si tant est que celui-ci me conserve mes indentations.
Je ne vois pas en quoi le manque de hauteur prut résoudre le problème, parce que tous n'ont pas la même hauteur (je ne vais pas mettre 500px de hauteur juste pour illustrer un commentaire HTML ... et a contrario, je *pourrais* limiter à 500px de hauteur pour un code complet de page (25 ou 30 lignes p.ex.)

L'élément block prend toute la largeur, certes, mais clairement ici je l'ai limité à 80%, donc il ne prend pas toute la largeur. Seulement il contient des lignes qui prennent plus que 80% visiblement.

Je vais continuer à chercher, merci de ces quelques indications. Smiley smile



EDIT : La rmarque de Laurent Denis semble pencher pour l'utilisation des balises <pre> :
http://blog.alsacreations.com/2004/05/19/7-a-la-recherche-des-balises-perdues#c68

EDIT2 : en forçant une hauteur à 200px pour l'exemple, ça marche sous IE7.
C'est pas joli qd je n'ai que 2 lignes de code source, mais ça a au moins le mérite de marcher. En height:auto; ça ne marche plus.
Je laisse comme ça, ou bien je fais un commentaire conditionnel pour IE7, je sais pas je verrai. Problème résolu en tous cas.
Modifié par Malcolm (25 Aug 2007 - 15:38)
Sujet clos
Aller à