Longueur de colonnes différentes en fonction des navigateurs

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !

Modérateur : Asumbaa

Zibou
Salamandre
Messages : 41
Inscription : 30 déc. 2010, 19:37

Longueur de colonnes différentes en fonction des navigateurs

Message par Zibou » 10 juin 2016, 16:13

Bonjour,

Un problème de mise en page, de longueurs de colonnes, donc.

J'ai en projet l'édition de 2 pages, sur deux colonnes. La colonne de gauche, étroite, contient très peu de texte, et beaucoup d'images (définie par le paragraphe ".colonne_images" dans la feuille de style).

Celle de droite, large, ne contient que du texte (définie par le paragraphe ".colonne_texte" dans la feuille de style, les deux colonnes "s’emboîtant" dans un paragraphe ".page").

J'ai donc ajusté ces deux colonnes (en jouant sur la hauteur des images, en px) afin que leurs longueurs tombent "pile-poile" sur Firefox.

J'ai ensuite testé la première page sur Chrome, IE, Opéra et Safari. Et là, catastrophe, la colonne images est beaucoup plus longue que le texte sur Chrome et Opéra, un peu plus courte sur Safari, et beaucoup plus courte sur IE !

J'ai ensuite revue la feuille de style, en mettant systématiquement des "margin = 0" là où n'y avait rien, afin de ne pas laisser les navigateurs interpréter ce vide à leur façon. Ce qui n'a pas changé grand-chose. J'ai ensuite cherché à jouer sur les hauteurs de lignes et de police, car il y a des différences certaines d'un navigateur à l'autre (un paragraphe qui fait 4 lignes sur FF en fait 5 sur Chrome). Le but étant d'avoir des colonnes presque identiques sur ces 5 navigateurs, il ne resterait plus qu'à ajuster la longueur pour être parfait sur FF, et je serais alors pas trop mal sur les autres.

Et à force d'essais et de retouches, je suis arrivé à un résultat presque satisfaisant, en définissant une taille de police (13px) et une hauteur de lignes (18px) dans ".pages", en ne rien mettant (quant à la taille de police et à la hauteur de ligne) dans ".colonne_texte", et en inscrivant seulement une hauteur de ligne "line-height: normal;" dans ".colonne_texte".

L'aspect dans FF est, à quelques millimètres près, identique à l'aspect des pages dans Chrome et Opéra (quelle que soit la feuille de style, ces deux sont toujours identiques), dans Safari, la colonne d'image est un peu plus longue, mais rien de scandaleux, colonne image qui est beaucoup plus courte sur IE (tant pis !).

Très fier de moi, je m'occupe alors de la deuxième page, qui se réfère à la même feuille de style, pensant que le résultat serait identique à celui de la première page, mais là, rien à voir : colonne images beaucoup plus courte sur Chrome et Opéra, encore plus courte sur IE, et ... beaucoup plus longue sur Safari. Aucune logique, donc, aucun rapport avec la première page !

Et encore, j'ai effectué ces tests sur un seul ordinateur. Je n'ose plus connecter ce disque externe (il s'agit d'un projet, qui n'est pas en ligne) sur un autre ordinateur, de peur d'avoir des différences avec le même navigateur...

Que faire ? J'ai lu pas mal de chose à ce sujet, en particulier sur le remplacement des mesures en px par de em ou rem (comme cet article : http://www.24joursdeweb.fr/2013/lachez- ... te-css-em/ , fort intéressant, mais qui me dépasse un peu...). Serait-ce de nature à régler mon problème, ou au contraire à l’aggraver ?

Cordialement,
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:46.0) Gecko/20100101 Firefox/46.0

Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités