Interprétation des "em" par IE 8 et supérieur

Bonjour,

Je poste ici car je ne suis pas sûr d'avoir des retours à mon petit soucis à partir de la section "Critiques de vos sites: code et design" où se situe la critique de mon site. Le problème étant spécifiquement CSS...

J'ai un problème à vous soumettre : sur mes pages "accueil" et "accueil étendu" (-http://christus-web.com/ et -http://christus-web.com/home-plus/) je me suis rendu compte que la hauteur des titres placés dans mes div .mag ne sont pas interprêtées de la même manière sous IE que sous les autres navigateurs : sous IE les h2 situés dans la div .mag ne comportent que 2 lignes alors que j'en veux trois, comme sur les autres navigateurs (ensuite le texte potentiellement en trop est coupé par un "overflow:hidden"). Pourtant je me suis appliqué à coder avec les fameux "em" dont beaucoup font grand éloge de compatibilité avec IE, alors qu'auparavant je codais en pixel.

En plus des "em" aurais-je oublié un paramètre en amont ? Genre : appliquer un "font-size:100%" à l'élément body ? Mais il parait que ce truc ne marche que de IE 5 à IE 7 ?

Comme je suis sous Mac et que je n'ai pas de PC sous la main je galère un peu...
Modifié par Olivier C (19 Dec 2011 - 11:34)

Salut,

Moi aussi j'avais ce problème car j'utilisais tout le temps du em, j'ai posté aussi mon problème ici. Suite à quoi j'ai décider d'utilisé les em seulement pour les valeurs typographiques et pas pour la hauteur/largeur/marge (etc) des éléments. Et bizarement ça a été tout de suite mieux.

Mais le problème que j'avais à ce moment la venait d'une erreur dans le code HTML (qui n'avait rien avoir avec l'endroit incriminé) et j'ai corriger cette erreur et hop plus de soucis d'affichage.

Donc je dirai que la première chose à faire est de corriger tes erreurs.

En deuxieme lieu je vois que tu n'as pas appliquer de reset css (si j'ai bien vu?) le problème peut vraiment se situer à ce niveau.

Sinon perso je suis sous mac aussi donc je ne peux pas apprécier le problème à ca juste valeur, mais j'ai déjà été victime de la même chose donc voilà les pistes que je te conseille de vérifier

Bonjour,

chez moi sur linux avec Konqueror et sous Windows avec ie, ff et iron le titre «Gérer honnêtement les biens qui m’ont été confiés – Grégoire de Nazianze» est toujours coupé avant la fin.

À défaut de résoudre le problème tu pourrais déjà utiliser la propriété :

text-overflow: ellipsis;
-o-text-overflow: ellipsis;

Pour tester tu pourrais regarder ce que donne une police non proportionnelle en ne lui indiquant que le format ttf et pas les autres woff, eot… S’il n’y a plus de différence entre les systèmes cela pourrait venir alors d’une gestion différente de l’approche des lettres ou de la définition de la mesure em entre les systèmes ou les différents types de polices (ttf, woff, eot).

J’ai rapidement parcouru ta css. Je crois qu’il faudrait que tu remplaces les «Sans serif» par des «sans-serif». Pas de problème sur nos ordinateurs car tu télécharges tes polices, mais sur les mobiles tu risques d’avoir un souci (ils interdisent les téléchargements de polices).

Si tu ne veux pas t’embêter diminue la taille de la police pour que tout tienne dans les cases et utilise des <br> ou des div si tu veux contrôler le retour à la ligne.

Après mettre du texte dans des cadres dont les dimensions sont définies en px (213px pour la largeur des div.mag) est rarement une bonne idée.
Modifié par adrien881 (19 Dec 2011 - 13:29)

Gil a écrit :
En deuxieme lieu je vois que tu n'as pas appliquer de reset css (si j'ai bien vu?) le problème peut vraiment se situer à ce niveau.

effectivement, je suis partit d'une feuille de style equilibree propose par Alsa.

Gil a écrit :
Sinon perso je suis sous mac aussi donc je ne peux pas apprécier le problème à ca juste valeur

Moi aussi , merci pour les pistes.

adrien881 a écrit :
chez moi sur linux avec Konqueror et sous Windows avec ie, ff et iron le titre «Gérer honnêtement les biens qui m’ont été confiés – Grégoire de Nazianze» est toujours coupé avant la fin.

À défaut de résoudre le problème tu pourrais déjà utiliser la propriété :

text-overflow: ellipsis;
-o-text-overflow: ellipsis;

Que les titres soient coupes, c'est prevu, mais je n'ai effectivement pas encore implemente la fonction ellipsis auquel j'avais pourtant pense. Je vais le faire mais je n'arrive pas à l'implémenter pour cette div, je ne sais pas pourquoi...

Serif comme Sans Serif ne sont pas des polices que je télécharge, ce ne sont pas des polices d'ailleurs mais un style typographique par défaut que tout os doit posséder. Merci quand même du tuyaux sur la non prise en charge du @font-face par certains mobiles, je regarderais cela de plus pres a l'occasion.

Quand au trait d'union au lieu des gillemets (Sans-Serif), je vois que le site Alsa fait de même. Je vais remplacer pour voir...
Modifié par Olivier C (19 Dec 2011 - 20:18)