J’en ai passé du temps à chercher la raison de ce mystérieux espace entre deux lignes d’un tableau, lorsqu’une des cellules comporte une image.

Ce problème venait uniquement sous Firefox et uniquement avec un Doctype en XHTML Strict. Pas de problème sous Internet Explorer et même chose avec un autre Doctype même en XHTML Transitional.

Sans solution à mon problème et persuadé que je ne suis pas le seul à l’avoir rencontré, j’ai lancé une recherche sur Google.

La solution est la suivante : rajouté un display:block sur les images.

Pourquoi : parcequ’en XHTML Strict la valeur de base d’une image pour un « display»  est « inline» . De ce faite, l’image se comporte comme du texte et affiche d’office « l’espace descendant» 
utilisé pour le jambage des lettres tel que « j»  « p»  « q»  etc… Rajouté un display:block supprime se jambage et de ce fait l’espace qu’il occupait.

Mais voici une explication bien détaillée sur le problème : Images, tableaux et décalages mystérieux – MDC.

Vue sur ZDnet.fr : Mozilla veut réduire les attaques Web en ajoutant CSP à Firefox

Article à lire : Mozilla veut protéger les sites…

Alsacréations nous parle de Google Chrome Frame pour Interner Explorer qui permet d’avoir le moteur de rendu Webkit et le moteur JavaScript8 sur Internet Explorer 6,7 et 8.

Autant pour le 7 et le 8 c’est discutable que pour Internet Explorer 6, l’ajout est utile pour l’utilisateur.

En terme d’intégration HTML cela ne change rien, il faudra coder pour IE6, à moins qu’un jour on retrouve ce plugin d’office sur IE6.

Lire l’article sur Alsacréations

Voici un article de Smashing Magazine (en anglais) très intéressant sur les bases des CSS : padding vs margin, float, positionnement, etc…

Un récapitulatif, voir une découverte dans certains cas, bien pratique. Je vous invite à le lire il vous permettra de bien aborder vos feuilles de style.

Mastering CSS Coding: Getting Started.