[Résolu] Différence d'affichage pour les sauts de paragraphes

Bonjour à tous, j'ai regarder longuement le faq mais je n'est pas trouver ma réponse alors je fait appel à la communauté.

Voiçi mon problème l'affichage des saut de paragraphe entre IE et FF n'est pas le même. J'ai déja réussi à résoudre le problème en se qui concerne les <br />, auquels j'ai ajouter :

div#middle {line-height:12px;}

Cependant il reste le problème lors des sauts de paragraphe et donc l'affichage est déformé.

Il y a t-il une solution pour diminuer l'espacement du <p>&nbsp;</p> sous IE?

Vous pouvez retrouver un exemple de mon problème sur le site que je développe. http://dijonnumismatique.free.fr/index1.php[/url]

Merci pour votre aide.
Modifié par 2bstudio (07 Aug 2007 - 20:19)

Bonjour

Est-de que la question a de l'importance ? Est-il utile de passer des heures à chercher un affichage identique sur IE et FF alors qu'il y a bien d'autres navigateurs et que personne ne s'amusera à afficher tes pages sur deux navigateurs pour vérifier que tout est à l'identique ? Et que tout utilisateur qui en ressent le besoin peut remplacer tes choix par les siens ? Ta solution de rajouter une div intermédiaire non-porteuse de sens est-elle un plus indéniable ou un obstacle supplémentaire ?

Bonjour,

Arsene a écrit :
Est-de que la question a de l'importance ?

Oui. L'écartement des paragraphes constaté dans IE peut raisonnablement être jugé trop important et peu propice à la lecture où à la cohérence graphique (ça fait bouts de textes éparpillés). Mais si on corrige pour IE, on risque d'avoir un rendu non satisfaisant pour d'autres navigateurs.
Donc oui, ça a son importance.

Maintenant, il faut bien constater que ce code HTML/CSS c'est un peu le bordel, là. D'abord, d'où vient cette idée saugrenue de mettre une classe "copyright" à tous les paragraphes du bloc principal de contenu? C'est un non-sens. Ensuite, la classe CSS "copyright" n'est jamais définie dans la feuille de style: seule la classe "Copyright" (utilisée pour le menu, semble-t-il) l'est. Attention à la casse (dans les deux sens du terme...)! Enfin, du texte de 9px de haut c'est vraiment suicidaire. Sur un écran en 1024x768, ça sera déjà limite chiant à lire. Sur un écran en 1280x1024 ou plus, c'est la cata.

Donc: reprendre toute la mise en forme du texte pour ce document à partir de zéro.
Faire des paragraphes simples (sans classe inutile), utiliser une liste non ordonnée pour le menu, utiliser des titres de section (h1, h2, h3...) pour les titres de sorte à créer une architecture de document cohérente. Nota: ne pas faire, pour le titre principal de la page, une image de 9px de haut avec bout de texte absolument illisible. Là encore, ça confine au suicide (commercial...). Je sais qu'en numismatique on est habitué aux textes tout petits, mais tout de même, faut penser aux visiteurs...

Pour faire les choses bien, côté CSS:
- définir une fonte, une taille de texte (de préférence relative) et une hauteur de ligne pour l'élément body, de sorte qu'elle s'applique à tout le document;
- corriger à l'occasion en modulant la taille du texte avec des EM, ou en appliquant des line-height de préférence à un conteneur (par exemple un div#menu, div#contenu, div#intro, etc.) plutôt qu'à un paragraphe donné ou à une classe donnée.

Pour finir, un peu de lecture:
http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em

Bonne continuation.
Modifié par Florent V. (07 Aug 2007 - 10:25)

Bon et bien merci pour cette longue réponse, je vois que j'ai encore beaucoup de boulot . Et je vais donc modifier l'affichage avec une taille un peut plus grosse. Quelle taille d'affichage me conseillez vous?

Salut,

Je dirais 10 à 12px de haut (en taille de texte normale), suivant ton public, plus si tu vises des personnes âgées ou autres déficients visuels.

Désolé 2bstudio, n'ayant pas ouvert le lien sous IE (suis sur mac) ni visualisé le code source je n'ai pas pu juger de l'ampleur du désastre éventuel.
Si le codage est correct, la différence d'espace entre paragraphes qu'on peut relever entre navigateurs est infime. Je pensais - à tort - que c'était à ça que tu faisais référence. Sorry.

Je vais reprendre le code de A à Z pour essayer de respecter au mieux les normes. Merci à tous.