Forum Astuces.divers Webdesign : la marge fantôme sous les images avec Firefox

Posté par  .
Étiquettes :
10
22
nov.
2010
Sur un projet de site web il y a quelques temps, les images gardaient, sous Firefox, une marge inférieure de quelques pixels impossible à supprimer. Seule solution : afficher toutes les images en tant qu'éléments de bloc avec la déclaration CSS img {display:block;}

L'origine de ce comportement, c'est en allant par hasard sur le fameux site Quirksmode que je l'ai trouvée. Explications.

Mode strict et mode quirks

On sait que la plupart des navigateurs peuvent afficher une page web selon 2 modes : le mode strict lorsque qu'il s'attend à du code valide, et le mode quirks lorsqu'il s'attend à du code de mauvaise qualité qui demandera des approximations. Le choix du mode se base sur le doctype utilisé par la page.

Or en mode strict, les images sont des éléments en ligne (inline), tout comme les liens ou les balises de mise en forme de texte, ce qui signifie qu'elles doivent réserver un espace sous la ligne de base pour les lettres descendantes comme q, j ou p. Ça explique cette "marge fantôme" sous les images et le fait qu'elle disparaissent en affichant les images comme des blocs.

Mozilla et le mode presque strict

Comment se fait-il alors que je n'aie pas remarqué ce problème avant ? En fait, comme ce problème avec les images ennuyait pas mal de monde, Mozilla a introduit un troisième mode dans ses navigateurs : le mode presque strict (almost strict), où les images s'afficheront comme des blocs.

Ce mode est activé sur les pages avec des doctypes transitionnels, les plus répandus. La plupart du temps donc, pas de marge fantôme. Comme le site sur lequel je travaillais utilisait pour une fois un doctype strict et pas un doctype transitionnel, c'est le mode strict qui a été activé, avec les images affichées en ligne.

Conclusion : attention au doctype utilisé, surtout si vous devez appliquer préciséments des styles CSS sur vos images !

  • # mode crade

    Posté par  . Évalué à 2.

    en parlant de code crade, j'ai déjà vu des sites générés par ce fabuleux outil professionnel et standardisé qu'est Word, et qui a la bonne idée de renseigner les images avec les chemins à la mode windows, genre src="images\photo-bidule01.jpg", ce qui ne s'affiche pas dans firefox. C'est vraiment trop crade pour accepter ça, ou alors il y a moyen de l'afficher quand même ?

    Only wimps use tape backup: real men just upload their important stuff on megaupload, and let the rest of the world ~~mirror~~ link to it

    • [^] # Re: mode crade

      Posté par  . Évalué à 3.

      te plains pas il aurait pu te mettre c:\images\photo-bidules.jpg ;)

  • # pffffff

    Posté par  . Évalué à 4.

    Vous devriez peut être travailler un peu plus vos cours css.

    L'alignement vertical dit vertical-align est par défaut : baseline, c'est à dire à la ligne de base de son élément parent, ce qui pour un texte est le lettre de base (sans queue vers le bas). Effectivement cela laisse un espace avec l'élément du dessous. C'est un comportement normal.

    Si tu ne veux pas d'espace dessous (et donc de l'aligner avec le bas des queues des lettres), la directive est vertical-align;bottom;

    comme quoi sur internet on trouve de tout....

    changer le type de display de l'image est une fausse solution car l'image n'est pas un block.

    On fait une excellent formation avec le greta sud aisne, à laon : infographiste en multimédia, juste avec des logiciels libres sous linux.

    • [^] # Re: pffffff

      Posté par  . Évalué à 2.

      En effet vertical-align est également une solution, mais l'intérêt ici est de mettre l'accent sur la différence de type de la balise img selon le doctype utilisé et le mode d'affichage du navigateur.

      La propriété vertical-align n'aura pas d'effet sur les éléments de type bloc, ce qui sera le cas pour une image sur un doctype transitionnel ou une page affichée en mode quirks.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.