Ubuntu-fr

Mathieu147

[Résolu][HTML/CSS] Image dans une table: marge supplémentaire

Bonjour,

Voici une table en HTML:

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="height:100px;width:100px;">
      Bla bla bla
    </td>
    <td style="height:100px;width:100px;">
      Bla bla bla
    </td>
  </tr>
  <tr>
    <td style="height:100px;width:100px;">
      Bla bla bla
    </td>
    <td style="height:100px;width:100px;">
      Bla bla bla
    </td>
  </tr>
</table>

Avec les CSS supplémentaires suivants:

table, table tr, table td, table img {
  margin: 0;
  padding: 0;
  border: 0;
}

Qui me donne bien une table avec 4 cellules de 100×100 pixels.

Mais si je fais ça:

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="height:100px;width:100px;">
      <img src="tralala.jpg" width="100" height="100"/>
    </td>
    <td style="height:100px;width:100px;">
      Bla bla bla
    </td>
  </tr>
  <tr>
    <td style="height:100px;width:100px;">
      Bla bla bla
    </td>
    <td style="height:100px;width:100px;">
      Bla bla bla
    </td>
  </tr>
</table>

Et ben là, ça bug! En dessous de mon image, il y a une marge de 5 pixels en trop: Firebug me dit bien que le style calculé du <tr> de ma table est de 105px, de même que celui du <td> dans lequel est l'image. L'image, elle, fait bien 100px.

Pourtant, il y a bien des margin et padding de 0 partout...

(Testé et confirmé dans Firefox, Chromium et Opera)

Qu'est-ce que ça peut bien être? Je voudrais que si je dis que ma cellule doit faire 100px, et que je mets un élément de 100px dedans, et bien ma cellule reste à 100px.

Merci

Dernière modification par Mathieu147 (Le 18/08/2010, à 10:44)

---

Pffff…

jde3

Re : [Résolu][HTML/CSS] Image dans une table: marge supplémentaire

Il me semble me rappeler (mais je suis loin d'en être sûr) que les retours à la ligne dans le code HTML, pour certains navigateurs foutaient la merde. Si tu fais :

<td style="height:100px;width:100px;"><img src="tralala.jpg" width="100" height="100"/></td>

ce n'est pas mieux ?

Mathieu147

Re : [Résolu][HTML/CSS] Image dans une table: marge supplémentaire

Non ça ne change rien sans retour à la ligne

---

Pffff…

jde3

Re : [Résolu][HTML/CSS] Image dans une table: marge supplémentaire

Et sinon :

<img src="tralala.jpg" width="100" height="100" style="border:0px"/>

?

Mathieu147

Re : [Résolu][HTML/CSS] Image dans une table: marge supplémentaire

Non, j'ai bien aucune bordure, aucun margin, et aucun padding nulle-part.

La seule solution qui marche (mais que je trouve merdique) est de mettre une marge négative de 5 pixels sur mon image...

---

Pffff…

Link31

Re : [Résolu][HTML/CSS] Image dans une table: marge supplémentaire

Bizarre. En tout cas, ça semble fonctionner correctement en doctype Transitional.

Mathieu147

Re : [Résolu][HTML/CSS] Image dans une table: marge supplémentaire

En fait j'utilise un Framework PHP, des templates etc pour générer mon HTML, donc je n'ai pas 100% de liberté sur l'affichage.

En fait je dois afficher de code dans un email, et suivant le client mail, j'ai pas nécessairement cette marge. Dans Evolution par exemple je ne l'ai pas, mais dans Gmail, je l'ai.

Je sens que ça va encore bien me péter les boulettes cette histoire...

---

Pffff…

Mathieu147

Re : [Résolu][HTML/CSS] Image dans une table: marge supplémentaire

J'ai trouvé!

Images, Tables, and Mysterious Gaps

---

Pffff…