28172 sujets

CSS et mise en forme, CSS3

Hauteur d'une ligne de tableau en CSS

Bonjour à tous,

J'ai un petit soucis de mise en forme CSS concernant un "table" et surtout la ligne "tr".

J'ai simplifié mon code pour arriver à un exemple minimal. J'ai un tableau, avec une seule ligne dedans. Dans cette ligne, j'ai une image de 80x80 pixels. J'ai mis un style à ma ligne de tableau pour que la hauteur de la ligne fasse également 80px. En théorie, l'image devrait donc occuper la totalité de la hauteur de la ligne.

<table cellspacing="0" cellpadding="0" style="width:750px; border:none; padding:0px; margin:0px">
       <tr style="height:80px; background-color:yellow; overflow:hidden">
           <td><img src="80.GIF" style="height:80px; width:80px; margin:0px; padding:0px; border:none" /></td>
       </tr>
</table>


Sauf que non Smiley fache
J'ai mis un arrière plan jaune pour la ligne du tableau, ce qui permet de voir que des pixels jaunes trainent en dessous de l'image, alors qu'il ne devrait pas y en avoir.
Comme vous le constatez, j'ai ajouté plein de styles à priori inutiles "au cas où"...

Cette page en live: http://www2.omail.fr/test/test.html

IE6 fait ce que je veux (tout arrive), mais pas Firefox ni Chrome, il doit donc y avoir une subtilité que j'ignore Smiley cligne

Si quelqu'un peut me faire profiter de ses lumières, je le remercie d'avance Smiley lol
Salut,

Je ne saurais pas te dire pourquoi, mais ça vient de ton doctype ...

essaie celui-ci :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Merci à tous les deux !

@pfoofen: je m'efforce de rester en mode XHTML strict Smiley biggrin

@6l20: j'avais cherché avant de poster... mais je pensais que le problème venait du tableau et non de l'image, donc je ne cherchais pas dans la bonne direction Smiley decu

Dans mon cas, je vais donc passer mon image en mode bloc.

Mais il reste deux mystères à élucider:
- Pourquoi le problème ne se produit-il pas en mode "XHTML Transitionnal" ?
- Pourquoi la ligne de mon tableau est-elle grossie ? J'ai mis "overflow:hidden" sur la ligne du tableau, elle ne devrait grossir sous aucun prétexte...

Si quelqu'un a des explications, je suis preneur Smiley smile
Sujet clos
Aller à