28173 sujets

CSS et mise en forme, CSS3

Cherche solution pour IE : balise <PRE> ou style "white-spa

Bonjour à tous,
voici on premier message sur ce forum.
Lecteur depuis plusieurs mois, j'en viens à vous pour m'aider à la résolution d'un beau problème d'affichage du IE 6 (j'ai pas testé avec IE7, je suis sous mac).

Je travaille actuellement sur la création d'un site dans lequel je compait insérer pas mal d'illustration ASCII (illustration réalisé avec du texte à chasse fixe).

Pour afficher ses illustrations, j'utilisais la balise <PRE>, mais il m'est impossible de définir une taille de police avec cette balise. Impossible de mettre un style "font-size", les navigateurs n'ont pas l'aire de le prendre en compte.

Je me suis donc rabattu sur le style "white-space: pre" sur un bloc (<p> ou autre)

ETRANGE...
Sur Firefox, safari, Opera, et même IE 5 pour mac no problem

Sur IE 6 PC ????
IE affiche le texte sur 1 seul longue ligne, pourtant, en appelant la page mise en cache (faire precedent puis suivant pour r'afficher la page) IE affiche correctement la page ???

Voilà mon probleme : je souhaite afficher du texte à chasse fixe sur un site web, en pouvant définir la taille de la police (la police étant du courrier).

Vous pouvez regardez mon problème à cette page :
www.sacripant.fr

Merci à tous ceux qui d'avance se pencheront sur mon problème
Modifié par sacripant (07 Nov 2006 - 15:55)
Administrateur
Hello et bienvenue ici,

Ton URL ne fonctionne malheureusement pas, tu l'as rédigée sans tenir compte des explications données dans l'Aide du forum et dans la FAQ Smiley ohwell

Je te suggère vivement d'éditer ton message afin de corriger ce problème. Smiley cligne

sacripant a écrit :
IE 6 (j'ai pas testé avec IE7, je suis sous mac).

IE6 sur Mac ?? Smiley confus

Au fait, il vaut mieux éviter de parler de Hack : vivement déconseillés par Microsoft justement depuis que IE7 corrige une bonne partie des lacunes d'IE6.
Il est préférable d'employer des commentaires conditionnels (cf. FAQ).
Modifié par Raphael (07 Nov 2006 - 15:53)
Corrections effectuées.

C'est en regardant mes page sur le PC d'un pote (avec IE 6) que j'ai constaté le problème d'affichage.
Administrateur
Ton url fonctionne bien à présent, mais tu t'es compliqué la vie pour rien :
règle du forum a écrit :
Tout texte présentant la syntaxe particulière d'une url (http://...., www.....) ou d'un e-mail (...@...) sera automatiquement converti en lien. Si vous désirez créer des liens plus élaborés, vous pouvez utiliser le bouton [ lien] afin d'obtenir des liens de ce genre : [ url=url]texte explicatif[ /url].
Modérateur
bonjour,

C'est le doctype "transitionnal" qui ne convient pas pour IE6 , ou un html 4.01 strict ou xhtml strict ou une vrai balise pre .
par exemple avec : 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

ça passe.

bug d' IE6 ? sur les dtd transitionnal ?.

++
Modifié par gcyrillus (08 Nov 2006 - 22:36)
Merci, Je vais tester les DTD.

J'avais déjà vu une info là-dessus sur
http://zonecss.free.fr/style_css/feuille_css_white_space.html

je cite :
a écrit :
Cas particulier de Internet Explorer

La propriété de feuille de style css white-space css ayant la valeur de white-space : pre est interprétée si la DTD de votre page est de type :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
ou
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Donc j'avais mis ma page en xhtml Transitional.

Mais je vais expérimenter la même page sous tous les dtd.

Affaire à suivre... Smiley smile
Modérateur
bonjour,

en fait dans ta page le white-space est partiellement interprété , il semble passé de pre a nowrap en cour de route , !?! etrange ce IE6.

L'ideal peut-etre serait quand même de faire usage d'une balise <pre> et de mettre dans h1 un titre qui veut dire quelque chose , l'Asci-Art , n'y a pas sa place a mon avis.
La balise pre est , je crois , implémenter correctement dans IE5.5 ou le white-space ne passe pas ( en "mode quirk" en general).

<p class="contact"> pourrait etre <address class="contact">.

Bon , voila , je te laisse faire tes choix Smiley smile

++
Bonjour á tous,

J´ai également un probleme sous IE (sous Firefox tout fonctionne bien) avec la balise <pre> car elle affiche tout sur la mème ligne et ne respecte pas les dimensions de la page. Même em mettant <pre width='80'> il ne prend pas en compte la largeur indiquée.
Vous pouvez voir mon probléme á cette page:http://www.pressreleases.info/EN/archive/2007/200701/20070119/20070119_133428.shtm

J´espére que quelqu´un conait une solution á mon probléme.
Merci.
Bonsoir,

Laisser comme cela, et ne surtout pas succomber aux sirènes aguichantes proposants des mises en pages mirifiques où les <pre> sont remplacés par des <div class="code">.

Le mode de rendu de <pre> est fait pour cela, et IE/FF n'implémentent pas la valeur idoine de la propriété CSS permettant d'y gérer les retours à la ligne.

Au fait, tout de même: ils servent à quoi, ces <pre> ?
Merci Laurant Denis de me répondre.
Moi non plus je trouve aucun intérêt á garder les <pre> car sa marche trés bien sans!
Mais je suis en stage et mon tuteur veut corriger l´erreur sans supprimer les <pre>, il faut donc que je trouve une solution á ce probléme.
Il faudrait pouvoir faire un retour á la ligne au bout d´un certain nombre de caractéres ou bien limiter la taille pour pas qu´il ecrive tout sur une ligne!!

Je sais pas trop comment faire.
Merci
Portman07 a écrit :

Mais je suis en stage et mon tuteur veut corriger l´erreur sans supprimer les <pre>, il faut donc que je trouve une solution á ce probléme.i


Le tuteur est peut-être adepte d'une bidouille qu'il croit (sincèrement) habile, et qu'il aurait mieux fait, dans ce cas, de vous donner directement, vu son peu de valeur finale.

En tous cas, je passe la main...
Modifié par Laurent Denis (23 Feb 2007 - 19:17)
Hum a écrit :
Je sent que je vais dire une connerie...


Bah non. C'en est pas une.

Mais si tu y tiens vraiment, en creusant, on bien va en trouver une Smiley ravi

<edit>/me sent venir le débat de fond sur la sémantique de <pre>, là... Vous nous l'avez déjà faite, celle-là. Mais vous avez de la chance, c'est encore vendredi pour quelques heures Smiley cligne </>
Modifié par Laurent Denis (23 Feb 2007 - 19:42)
La solution utilisée dans la page indiquée ci dessus est un attribut HTML déprécié (<pre width="nom de caractères"> qui a notamment le défaut d'être très peu implémenté par les navigateurs.

La propriété CSS2.1 white-space: pre-wrap produit un bien meilleur résultat (gestion des retours à la ligne avec bloc de largeur fluide). Mais là encore, les implémentations sont actuellement limitées.
non mais merci pour tout le travail Smiley cligne je ne suis pas pro Smiley bawling
comme la plus part ici
Modifié par hidri (24 Feb 2007 - 13:55)
Sujet clos
Aller à