#1 Le 28/07/2010, à 13:14
- 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…
Hors ligne
#2 Le 28/07/2010, à 16:00
- 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 ?
Hors ligne
#3 Le 28/07/2010, à 17:27
- Mathieu147
Re : [Résolu][HTML/CSS] Image dans une table: marge supplémentaire
Non ça ne change rien sans retour à la ligne
Pffff…
Hors ligne
#4 Le 29/07/2010, à 10:23
- 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"/>
?
Hors ligne
#5 Le 02/08/2010, à 17:21
- 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…
Hors ligne
#6 Le 02/08/2010, à 21:55
- Link31
Re : [Résolu][HTML/CSS] Image dans une table: marge supplémentaire
Bizarre. En tout cas, ça semble fonctionner correctement en doctype Transitional.
Hors ligne
#7 Le 04/08/2010, à 16:07
- 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…
Hors ligne
#8 Le 09/08/2010, à 09:30
- Mathieu147
Re : [Résolu][HTML/CSS] Image dans une table: marge supplémentaire
J'ai trouvé!
Pffff…
Hors ligne