Bonjour à tous !
Lecteur assidu de votre forum, j'en viens à vous demander conseil au sujet d'un problème récemment rencontré. Voici le détail :

- Une page XHTML strict (parce qu'en transitionnal il n'y a pas de pb...)
- Un tableau de 9 cellules
- Un jpeg dans la cellule centrale

Jusqu'ici rien de bien terrible donc. Néamoins, sous Firefox, la cellule contenant le jpeg est systématiquement agrandie en hauteur de quelques pixels. Exemple ici : www.saveur-whisky.com

J'ai beau spécifier en css la taille de la cellule en question, modififer les cellules adjacentes, rien n'y fait. J'ai toutefois remarqué que ces quelques pixels sont fonction de la taille de ma police. Si dans cette cellule centrale je place un "font-size:1px;", je n'ai plus qu'un seul pixel de décalage...

Bref, je ne m'en sors pas, et je suis certain d'avoir omis ou mal fait quelque chose.

D'avance merci pour tous vos avis, quand bien même seraient-ils sévères...

++
Fan2.

je pense que tu pourrais essayer de supprimer le nbsp; qu'il doit y avoir dans ton td
mais tu veux faire koi o juste avec le tableau ? parce que c pas trop adapté pour une image ...

Cela peut aussi venir de ton image. En effet, en XHTML Strict dans FF, les images se comportent comme des caractères typo. Ce sont des elements "en ligne" qui se placent sur la ligne de base typographique.

Pour résoudre ce problème, tu peut, par exemple, rajouter la regle CSS suivante :

CODE

td img{  display:block; }

Salut à tous,
Je serais du même avis que Jep, j'ai eu un cas de figure à peu près semblable récemment ou j'avais plusieures images en ligne dans un TD.
Il y avait toujours 1 à 2 pxl de décallage entre chacune d'elle.
Résultat : Application d'un petit css float sur le TD et hop ca passait sans problèmes.
(Au cas ou le display:block ne passerait pas )
Bon courage,
Gilles

Personnellement, je ne vois pas comment on peut faire du XHTML strict en utilisant des tableaux ? Les tableaux ne doivent servir en général qu'aux données alors ensuite, à toi de voir...
Moi j'utilise Firefox mais je ne vois pas de quoi tu veux parler car y'a pas d'exemple comparatif. J'ai tester ton lien sous Firefox et IE et fait des copies d'écran. Les deux images, si tu parles de la bannière, sont identiques en taille mais celle de Firefox est plus belle car elle comporte un ombre portée :wink:

Sinon cette phrase: "Notre site ouvrira ses portes le 1er juin 2005" est assez drôle car entre nous ton site a déjà ouvert ces portes: la preuve on peut y entrer, donc c ouvert ! C'est toute la différence entre le virtuel et le réel. Sinon bonne continuation, j'aime bien les couleurs.

Aysseline

Merci à tous pour vos différents points de vue.

Effectivement, l'idée d'utiliser un tableau en xhtml strict n'était pas la meilleure. Pourquoi alors me direz-vous ? Parce que je voulais placer sur le bords de mon image un effet ombré, et que je n'ai pas trouvé de solution autre qu'un tableau pour gérer ces ombres qu'il me faut placer de part et d'autre de mon image.

Mais bref, j'ai trouvé mon salut dans la balise line-height. Je ne suis pas certain d'avoir compris comment ni pourquoi, mais il suffit d'ajouter à ma css un line-height:0px; et ô magie, je n'ai plus mon décalage.

Sauvé donc ! Encore un grand merci pour votre aide précieuse !

++
Fan2.

Salut,

avec les CSS tu peux mettre de l'ombre si tu veux ^^

il te suffit de jouer un peu sur les bordures, le remplissage ...

Regarde l'effet que j'ai mis pour afficher les photos:

http://www.sutekidane.net/blog/photos/


sans oublier la référence: http://www.alistapart.com/articles/cssdropshadows/


++

Héhé, directement dans mes favoris...

Merci pour l'astuce, cela m'évitera pas mal d'erreur en effet.
Par ailleurs, je recommande sur ce sujet le tuto de Sibelius qui apporte de bonnes solutions en la matière.

++
Fan2.