28173 sujets

CSS et mise en forme, CSS3

Bonjour,

je rencontre un problème de mise en forme, je ne sais pas si cela peut se gérer en CSS, ou si le problème vient d'ailleur, mais je viens demander l'avis ici.

J'ai fait quelques recherches sur le forum, mais ce n'est pas évident, avec les mots clés : image + tableau + marge

mdr, faut croire qu'on parle beaucoup de ca ici

Voila mon problème, pour un besoin bien particulier, je dois reconstituer une mosaique en tableau

donc je construit un tableau de 9 cases, en CSS je taille mon tableaux aux bonnes dimensions

un tr {height:125px margin:0px padding:0px} idem pour le td avec la largeur qui vas bien aussi

je collapse les bordures border-collapse: collapse;

je met les bordures qui vont bien : border : 1 px solid red;

mes images sont taillées en html aux bonnes dimensions 172 * 125 px et en css je passe les marges des images à 0px et le padding aussi

au final tout se passe bien sous IE6 et IE7 les images remplissent bien les cellules et sont collées

par contre, dans firefox : je retrouve une "marge" au bas de l'image d'environ 3px, quelqu'un aurait une idée d'ou cela pourrai provenir ?

EDIT : ce n'est pas non plus un problème de relicat de retour chariot il n'y en a pas dans mon code html la succession fonctionne bien :<td><img src... /></td>

EDIT 2 : apparement ce serais un problème de firefox qui ajouterai quelques pixel dans le bas des TD, est ce un problème connu de firefox ?

EDIT 3 : Même comportement dans Opera, c'est donc ptete bien un problème au niveau de la feuille de style, cela dit, je ne sais pas a quel niveau

EDIT 4 : avec un line-height à 0px sur le TD ca passe --> Résolu

Merci beaucoup pour vos idées
Modifié par Viper82 (28 Dec 2006 - 17:18)