[RESOLU] Problème entre FF et IE sur mon site

Bonjour à tous !
je suis sandrine, je suis nouvelle sur ce forum alors j'epsere que vous serez indulgents avec moi !
Voici mon soucis :
j'ai un petit bug sous IE 6 que je n'ai pas sous FireFox.
vous me dire quoi de plus naturel !!
Mais ça fait moche et je peux pas laisser ça comme ça !
Donc regardez cette page :
http://www.christiantual.com/
j'ai un petit filet comme un saut de ligne entre la div hearder et les autre du dessous.
voici une image pour ceux qui n'ont pas IE6 car ça marche sous IE7 evidement...!!
Merci d'avance à tous!
Sandrine
Modifié par music03 (29 Feb 2008 - 00:07)

Bonjour,

Le problème vient de l'en-tête, qui a une hauteur fixe de 225px, et pour contenu une image haute de 225px.

Avec un affichage par défaut (et en mode Standard plutôt qu'en mode Quirks), les images se comportent comme des caractères de texte: le bas de l'image se place sur la baseline de la ligne de texte, ce qui laisse un espace en dessous.

En gros, tu as donc un bloc de 225px dont le contenu fait à peu près 225px. Si tu donnes un height: 225px à div#header, le contenu dépassera de 2px (invisible, vu qu'il s'agit d'un espace «vide»), sauf avec IE6 qui ne fige pas les blocs en hauteur avec juste la propriété height (qui fonctionne un peu comme min-height).

Solutions (au choix):

/* 1 */
div#header {height: 225px; overflow: hidden;}

/* 2 */
div#header {height: 225px;}
div#header img {display: block;}

/* 3 */
div#header {height: 225px;}
div#header img {vertical-align: bottom;}

/* 4 */
div#header {height: 225px; line-height: .5em;}

/* 5 */
div#header {height: 225px; font-size: 1px;}

Il y a l'embarras du choix. Pour ma part, je privilégierais plutôt les trois premières.

Au passage, l'image dit «Christian Tual, artiste-peintre, de l'ombre à la lumière», mais quand on regarde le code source on n'en trouve pas trace. Qu'est devenu l'attribut altde l'image?