28220 sujets

CSS et mise en forme, CSS3

Bizarrerie d'IE (6) car lui seul affiche ce bogue (les navigateurs soucieux d'un certain Consortium WWW comme Mozilla ou Opera n'en ont cure).

Je m'explique :

je veux afficher plusieurs styles typographiques dans deux colonnes d'inégale largeur (fixée en pixel) inclues dans un conteneur (largeur fixée en pixel).

Jusque là rien d'anormal mais j'applique au niveau de titre 2 (h2) l'attribut 'font-style' avec la propriété 'italic'.

Or il se trouve qu'une des deux colonnes (padding de 10px) a sa largeur qui augmente anormalement (2 ou 3 px) sur IE 6 et j'en ai trouvé la cause : la dîte colonne a une largeur réelle de 185 px (165 px + 10px + 10px) mais pour le contenu il reste donc 165px (autre attribut police pour h2 : font-size: 0.82em; font-weight: bold;) et en fait 165px de largeur effective pour du texte avec 'font-size: 0.82em; font-weight: bold;' et surtout avec 'font-style:italic' et bien IE considère qu'il doit faire tenir toute la ligne en mode normal comme en italique donc comme le fait de pencher le texte augmente sa largeur il y a un décalage de la largeur totale de la colonne ce qui peut poser bien des problèmes.

Techniquement comment cela s'explique ? C'est quand même trés bête... Qui a dit stupide ?

Smiley confus
Modifié par Rea (26 Apr 2005 - 17:10)
Bonjour Rea,

et bienvenue sur le forum Smiley biggrin
Rea a écrit :

Techniquement comment cela s'explique ? C'est quand même trés bête... Qui a dit stupide ?

Simplement... IE attribue une plus grande largeur à chaque lettre mise en italique Smiley confus
Je n'ai pas refait tous tes calculs mais tu devrais t'en tirer en augmentant un peu la largeur du bloc conteneur.
Bonjour Smiley ohwell

Tu indiques dans ton titre font-family:italic (qui n'éxiste pas) et dans ton post font-style:italic. Lequel doit-on comprendre ? Smiley cligne
Aurais-tu un exemple en ligne?
Igor a écrit :
Bonjour Smiley ohwell

Tu indiques dans ton titre font-family:italic (qui n'éxiste pas) et dans ton post font-style:italic. Lequel doit-on comprendre ? Smiley cligne
Aurais-tu un exemple en ligne?


Bonjour

erreur d'inattention excusez-moi : ma crédibilité ne pouvait tomber plus bas) avec un titre pareil...

enfait (reprenons) je pense que la raison est simple :

dans la modification de la taille du texte via IE (et non pas Mozilla) : IE enfin son moteur : associe le contenu dans son contenur ainsi si la taille (largeur) du contenu augmente son conteneur également d'où problème quand le design ne doit pas être 'elastic' alors qu'avec Mozilla seule la taille du contenu change indépendamment de celle de son conteneur (si la largeur est fixée?).

En clair il est préférable pour les personnes ayant des problèmes de vue (agrandissement forcée de la taille du texte) autant que les webdesigner (ayant des problèmes de vue?) d'utiliser un navigateur qui gère la fonction le Zoom (notamment Opera et nombre d'émulation d'IE).

Enfait mon topic est la conséquence d'un arrachage de cheveux devant cette subtilité d'IE j'avais tenté de trouvé le problème mais j'avais imaginé des théories sur l'incompétence des programmeurs de Microsoft mais enfait c'est leur logique qui enquiquine plus qu'autre chose... Smiley langue
Un lien à ce sujet : IE and italics problems avec une solution.

Sinon, ayant déja rencontré ce soucis, une solution rapide mais pas des plus accadémique est d'encadrer l'ensemble par un div avec un largeur moindre genre 99%.

Eric.
Eric a écrit :
Un lien à ce sujet : IE and italics problems avec une solution.

Sinon, ayant déja rencontré ce soucis, une solution rapide mais pas des plus accadémique est d'encadrer l'ensemble par un div avec un largeur moindre genre 99%.

Eric.


Dans mon cas ce principe n'arrange rien au contraire il ne décale plus le tout dans la largeur mais affiche comme Mozilla : la div bascule en bas à gauche des autres (float:left).

Sinon les solutions proposées (www.positioniseverything.net) ne sont applicables que dans certains cas Smiley sweatdrop

un bogue est un bogue il faut faire avec > zapper l'italique quand l'espace et l'espacement ne le permettent pas ® La solution de facilité Smiley lol