18082 sujets

Questions générales et questions de débutants

[Resolu] Différence d'affichage de la balise <img> entre IE et

Bonjour,

Je suis perplexe quand à cette différence d'affichage des balises <img> sur le site internet www.liber-mundi.org dont voici un aperçu.

upload/4971-Image1.gif

La version du haut c'est via un moteur de IE et celle du bas avec un moteur Firefox. Après avoir décortiqué le code morceau par morceau je me suis aperçu que cela était dû aux balises <img> (en les plaçant en commentaire).

L'extrait de code suivant est ce qui affiche la partie "parchemin" juste au dessus du texte "Bienvenue chez LiberMundi" et dont vous pouvez voir que Mozilla décalle de quelques pixel ces images.

<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
   <tr>
      <td width="18" height="37">
         <img src=".../BigBox_01.gif" width="18" height="37"></td>
      <td>
         <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
               <td width="119">
                  <img src=".../BigBox_02.gif"></td>
               <td background=".../BigBox_02bg.gif">
                  &nbsp;</td>
            </tr>
         </table>
      </td>
      <td width="27">
         <img src=".../BigBox_03.gif" width="27" height="37"></td>
   </tr>
...


Si vous avez une idée sur les raison de cela, je suis a l'écoute.

Merci d'avance.
Modifié par thedoomed (30 Jan 2006 - 11:57)
L'élément img est un élément de type en-ligne. Il se positionne donc sur la ligne de texte, et pas forcément tout en bas de la ligne. Du coup, il y a un peu d'espace vide qui est ménagé. Très pratique pour du texte (ça lui évite de coller à une bordure en bas, par exemple), mais moins si on veut juste insérer une image.

Deux solutions possibles :
- faire de tes images (ou des images concernées par ce problème) des éléments de type bloc :
img {display: block;}

- donner à tes conteneurs (les éléments qui contiennent les images) une hauteur de ligne nulle. Du coup, pas d'espace vide ménagé.
line-height: 0;
Bonjour,

Ce n'est pas vraiment cela. Les éléments <img> sont placés par défaut sur la ligne de base du texte (vertical-align: baseline), ce qui réserve l'espace nécessaire aux jambages inférieurs des lettres.

Question traitée dans http://devedge-temp.mozilla.org/viewsource/2002/img-table/

Solution: utiliser vertical-align: middle

Le display: block est un contournement moins direct.
Modifié par Laurent Denis (30 Jan 2006 - 12:03)
Merci de l'info, ceci dit le display.skin que j'ai utilisé fonctionne alors que l'alignement vertical lui ne fonctionnait pas.
Ouaip, c'est sur. Ceci dit j'ai mis en lien ce site que tu m'a sité car je sent que j'en aurais besoin. Je vais m'atteler bientôt a mettre a jour le css de ce même site (liber-mundi) et je sent que je vais passer des nuits blanches a essayer de règler les incompatibilités IE/Mozilla.

Merci pour ces réponses a vous deux.
Sujet clos
Aller à