Espaces indésirables

Il existe parfois des comportements navigateurs difficiles à comprendre et à expliquer. Celui de l'espace qui se crée en-dessous des images sur Internet Explorer en fait partie.

A la suite de la rédaction de ce tutoriel qui explique comment réaliser des cadres arrondis autour des textes, plusieurs personnes m'ont fait part de problèmes curieux : la partie haute ou basse de leur cadre se déboublait ou présentait un espace non volontaire.

Voici un exemple de partie incriminée :

<div class="toto"><img src="images.png" width="100px" height="10px" alt="" /></div>

Après quelques tests, il s'avère qu'il s'agit un problème avec Internet Explorer sur les balises en-ligne dont le "height" est inférieur à celui du texte courant

J'ai donc proposé une solution tout en bas du tutoriel :

Sur IE toutes les images (et autres balises en-ligne) occupent par défaut une hauteur minimale (celle du texte par défaut), soit environ 13px. Donc toutes les images de moins de 13px prendront quand-même 13px, cela va générer un espace en-dessous de l'image.
On peut feinter IE en mettant font-size à 0 ou line-height à 0 dans le bloc contenant l'image (ici le div de classe "toto").

Cette solution fonctionnait très bien, mais ne fournissait aucune explication sur le phénomène en question.

Finalement après de nombreuses recherches infructueuses, je trouvais enfin des explications claires sur LaNouvelleFAQ.

La Nouvelle FAQ le dit bien mieux que moi :

En HTML, les images sont considérées comme du texte, c'est à dire qu'une image se placera par défaut sur la ligne de base du texte, comme n'importe quelle lettre.

Le problème est qu'il y a toujours un espace sous la ligne de base du texte pour laisser de la place aux lettres comme : p q g ou y

Dans un tableau ou un bloc, cet espace peut s'avérer gênant si l'image ne fait pas partie d'un texte mais occupe la totalité d'une cellule ou du bloc.

L'astuce consiste alors à ne plus considérer l'image comme un élément en-ligne qui se comporte comme du texte mais comme un Bloc à part entière. On utilise pour cela la propriété "display" :

img {
  display: block;
}

D'ailleurs en passant, je vous conseille vivement de parcourir le wiki de la NouvelleFAQ, souvent très clair et bien construit... vous passerez le bonjour à GM de ma part !

Par Raphael GOETTER - mardi 15 juin 2004 à 11:01

Astuces - #25 - Lu 7867 fois - Intérêt du billet: 4.5(8) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le mardi 15 juin 2004 à 17:39, par Ldo :: site :: #

lol, j'ai justement travaillé la dessus cet aprém
me suis rabatu vers le font-size 0
merci en tt cas, prochaine fois je saurais koi mettre ;)

Le mardi 15 juin 2004 à 19:13, par [NikO] :: site :: #

Le probleme du font-size:0; c'est que si on affiche pas les images, on ne voit pas le texte du alt="",
j'utilisais un line-height ..
mais il est vrai que cette methode est beaucoup plus élégante ...
Un autre probleme de ie,
c'est lorsque qu'on a une page avec une liste, dont le code source est incrémenté d'une ligne à chaque fois.

ie rajoute des espaces entre les li !

Le mardi 15 juin 2004 à 20:49, par Antoine :: site :: #

C'est comme ça que je faisais. J'avais jamais essayé le font-sise 0

Le mercredi 16 juin 2004 à 09:42, par snoop :: site :: #

Ce blog est une mine d'or ! ;)
Il existe d'autres erreurs dues à IE avec les images, même si elles sont plus hautes que 13px.
J'ai par exemple une image de 125px par 82px que je veux encadrer d'une bordure blanche de 1px.
Le code CSS appliqué à l'image est celui-ci :

================
position : absolute;
top : 230px;
right : 80px;
left : 350px;
border-right : 1px solid white;
border-left : 1px solid white;
border-top : 1px solid white;
border-bottom : 1px solid white;
width : 125px; height:82px;
========================

Et on constate quand même qu'une ligne de 1px est présente entre la bordure basse et l'image.
L'exemple ici : www.fredboucher.com/photo...

Merci Raphaël de tes informations toujours aussi utiles ! ;)

Le mercredi 16 juin 2004 à 17:11, par heliodrop :: #

Ben merci pour cette info. Comme quoi, ça peut être utile les blogs.
J'avais ce problème, mais que avec Firefox (et que en Strict).
Les images étaient placée dans des cellules de tableau.
Le code et le screenshot sont ici:
dreamweaver.media-box.net...

PS: C'est peut-être pas super consistant pour un tutoriel, mais ça vaudrait la peine d'en faire un, histoire que ça se perde pas parmi tous les autres billets. Ben c'est toi le chef, somme toute.

Le mercredi 16 juin 2004 à 21:54, par Fabrice Bonny :: site :: #

Heliodrop: la réponse est sur devedge.netscape.com/view...

Le jeudi 15 juillet 2004 à 18:33, par Florian :: #

Merci pour l'info, je me suis cassé la tête pendant 3 heures dessus, avant de tomber sur cette page qui a réglé mon problème :D

Le mercredi 23 février 2005 à 01:19, par chmouc :: site :: #

Pffffiiouuu 2 heures de perdues pour un petit espace entre mes images.
Je remercie trop celui qui a fait cet article ;)

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.