[Résolu] Différence d'agrandissement de police

Salut,

Je reviens vers vous au sujet de mon site que j'ai présenté à la critique récemment : http://mikachudesign.free.fr/site/index.php
J'ai depuis reçu un mail m'informant que l'agrandissement était catastrophique sous IE6 et la réduction lilliputienne, et effectivement après vérification que j'avais oublié de faire, il s'avère que c'est effectivement le cas.

Auparavant, j'avais toujours pu constater que passer de la taille "moyenne" à "plus grande" sur IE correspondait à deux agrandissements à la molette sur firefox. De la même manière le passage de "plus grande" à "la plus grande" correspondait aussi à deux agrandissements à la molette.

Lorsque je regarde sur beaucoup de sites (notamment alsacreations.com et alsacreations.fr, c'est effectivement le cas, mais pas sur le mien, ou la typo devient géante sur IE déja à la taille "plus grande".

Quelqu'un aurait-il une idée de ce que j'ai pu faire de travers, car je ne trouve pas d'oû cela peut provenir. Cela vient-il de mes polices en em ? d'autre chose ?

Merci par avance de vos réponses qui je l'espère vont résoudre ce problème sur ce "navigateur".
Modifié par Mikachu (09 Jan 2007 - 19:04)

Bon j'ai partiellement résolu le problème en remplacant :

a écrit :
html {font-size: 1em;}

par

a écrit :
html {font-size: 100%;}

Je pensais que l'une et l'autre de ces deux écritures était équivalentes, et finalement je me rends compte que non. Vaut-il mieux finalement utiliser les pourcentages ou les em ? (je constate qu'alsa fonctionne avec tout en pourcentages...)

Par contre je ne comprends pas pourquoi en cas de passage en "taille la plus large sur IE", la colonne de navigation de droite, pourtant définie avec une largeur en pixels peut être redimensionnée par IE, faisant ainsi descendre le contenu en dessous du bas de cette barre de navigation.

Merci d'avance de vos éclaircissements concernants les em/% et ce décallage d'une valeur fixe.

Salut Mikachu,

Il y a un topo très complet de Mpop sur son site et il se trouve aussi dans les tutoriels d'alsacréationS. Le mieux c'est d'aller voir de se coté là je pense.

Salut,

Merci Clb, j'ai (re)lu cet article hier soir et j'ai réalisé çà.
C'est ainsi que j'ai corrigé partiellement ma feuille de style.

Mais je ne comprends toujours pas pourquoi IE se permet de redimensionner la largeur d'un élément définie en pixel en agrandissement "le plus large".

Pour référence (futurs lecteurs de ce sujet confrontés à un problème similaire, nous pensons à vous ) :
1 - Exposé et test sur ce bug d'IE :
bug avec les unités relatives em et Internet Explorer

2 - Mentionné aussi dans :
Typographie web : gérer la taille du texte avec les « em »

Mikachu a écrit :
Mais je ne comprends toujours pas pourquoi IE se permet de redimensionner la largeur d'un élément définie en pixel en agrandissement "le plus large".

Heu... concrètement, de quoi il s'agit ?
Un élément dont la largeur est définie en pixels s'agrandit lorsque son texte est trop important ?

C'est peut-être le cas avec IE6 (pas IE7), lorsqu'une chaine de caractère est trop longue. IE6 n'est pas très bon pour figer la taille d'un élément (cf. height interprété comme min-height...).

Salut,

Merci de ces précisions pour ceux qui auront la chance de ne pas se prendre la tête à chercher.

a écrit :
Heu... concrètement, de quoi il s'agit ?
Un élément dont la largeur est définie en pixels s'agrandit lorsque son texte est trop important ?

oui c'est tout à fait çà. D
Ma colonne de droite fait 190 ou 200px de large je crois (de tête). Sur FF quand j'agrandis le texte, il finit par déborder du conteneur sans rien décaler, ce qui fait que la mise en page, ormis les mots qui déborde, reste similaire. IE agrandit quand à lui le conteneur à la taille du mot le plus long, et provoque ainsi une différence de largeur qui provoque la descente d'un bloc de contenu en dessous dans la page.

Mikachu a écrit :
Ma colonne de droite fait 190 ou 200px de large je crois (de tête). Sur FF quand j'agrandis le texte, il finit par déborder du conteneur sans rien décaler, ce qui fait que la mise en page, ormis les mots qui déborde, reste similaire. IE agrandit quand à lui le conteneur à la taille du mot le plus long, et provoque ainsi une différence de largeur qui provoque la descente d'un bloc de contenu en dessous dans la page.

Tu as essayé en précisant un overflow: visible ?
Au pire, il faudra peut-être utiliser un overflow: hidden pour IE (commentaires conditionnels ?)...