RÉSOLU : Question de DTD

Bonjour à tous,

Question existentielle du matin :

Est-ce que quelqu'un saurait m'expliquer pourquoi avec une DTD strict, lorsque l'on clique sur l'image (le truc zebré qui pique les yeux) la "zone en pointillés" que nous affiche firefox (et surement d'autres browsers) est plus grande que l'image (ca depasse en bas quoi) alors qu'avec une DTD transitional ce n'est pas le cas ?

La page en DTD strict
La page en DTD transitional

Merci bien pour vos réponses !
Modifié par Lavazzo (31 Mar 2008 - 13:35)

Hello,

Hmm... peut-être une subtilité due au «Almost Standards Mode» (en Transitional) et aux «Standards Mode» (en Strict).
La zone en pointillés comprend toute l'étendue du lien. Celui-ci comprend, en mode Standard, l'espace réservé sous l'image (car une image se place par défaut comme un caractère sur la ligne de base du texte... et dans une ligne de texte, il y a un espace réservé en dessous de la ligne de base, histoire que les caractères qui ont des parties descendantes comme les lettres ç, g, j, p, q, et y, tiennent en hauteur). En mode «presque standard», par contre, non (pour pas casser les designs en tableaux qui utilisent allègrement des images toutes seules dans des cellules de tableaux).

La FAQ en parle (espaces indésirables sous les images).

Je n'avais jamais remarqué ce comportement.

Voici un lien que tu as surement déjà consulté et qui ne répond pas directement à cette différence entre dtd strict et transitional mais qui peut apporter certains éléments de réponses : faq-58-Espaces-indesirables-sous-les-images

Effectivement, c'est bien cette histoire d'espace réservé. J'ai collé un "font-size:200px;" afin de bien mettre en evidence le problème :

La page en DTD strict avec "font-size:200px;" sur le header
La page en DTD transitional avec "font-size:200px;" sur le header

Après tout, c'est vrai que c'est un comportement logique (et je note au passage qu'IE se fout royalement du mode strict et n'affiche toujours pas l'espace reservé).

Par contre, j'aimerai bien connaitre une methode qui me permettrai (tout en restant en mode "strict", et sans techniques stupides du genre "font-size:0;") d'afficher un header clicable sans cet espace disgracieux. (mon "header" devant être collé au "div" qui le suit pour des raisons esthetiques).

Je suis pret a abandonner mon :

<div id="header"><a href="#"><img src="image.gif" alt="mon image" title="" /></a></div>

Encore merci.
Modifié par Lavazzo (31 Mar 2008 - 11:00)

div#header img {display: block;}

ou

div#header img {vertical-align: middle;}

(Les deux doivent être mentionnés dans la FAQ, je pense...)

J'avais pas pensé à ca en effet ^^ ( j'ai adopté le display:block; )

Merci beaucoup !
Modifié par Lavazzo (31 Mar 2008 - 13:45)

En effet le mode almost standard est une invention de Mozilla pour pouvoir coller les image incluses dans des cellules de tableaux,
les dernières versions de Safari et d'Opera se comportent de la même manière en présence d'une DTD transitional et le mode de rendu
d'IE comme tu as pu le remarquer est similaire quelque soit le doctype.
Modifié par Hermann (31 Mar 2008 - 17:49)