5568 sujets

Sémantique web et HTML

Espacement indésirable xhtml1-strict.dtd

Voici mon problème :

J'ai veux créer un menu avec des coins arrondis. Mais quand j'affiche la page html sous firefox j'ai le problème suivant.

upload/22922-fenetreapr.jpg

J'ai un espacement vertical indésirable.

Sous ie le problème n'apparaît pas.

Comment supprimer ce dernier

La page web à problème est en ligne ici :

[URL="http://www.anno-fr.com/tmpasupp/index.html"]http://www.anno-fr.com/tmpasupp/index.html[/URL]

NB : Quand je supprime le code suivant, 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


cela fonctionne. Comment faire pour ne être en règle avec xhtml1-strict ?
Modifié par AeroCosmic (19 Jul 2009 - 17:38)
Le doctype est obligatoire pour être valide W3C donc il faut le laisser.

Quand à ton problème ça semble plus être lié aux valeurs par défaut de chaque navigateur.

Avec ceci dans ton css tu devrais ne plsu avoir ce problème de marge :
tr, td {
    height:100%;
}

img {
    height:100%;
}


L'idéal pour éviter ce genre de problème est d'utiliser une feuille de style qui "reset" tous les paramètres css afin qu'ils aient les mêmes valeurs de base sur tous les navigateurs.
Exemple : http://meyerweb.com/eric/tools/css/reset/
Salut,
a écrit :
Quand je supprime le [ doctype ] cela fonctionne
Maman disait toujours : "La vie sans doctype, c'est comme une boîte de chocolats, on ne sait jamais sur quoi on va tomber." Smiley cligne

a écrit :
J'ai un espacement vertical indésirable.
Explication :
- un navigateur considère une image comme du texte (ce léger "raccourci" est suffisant ici)
- le texte s'affiche toujours dans une ligne, dont la hauteur par défaut oscille entre 1,2 et 1,3 fois la hauteur du texte (taille de police)
- Prenons l'exemple de ta première td. Tu insères une image, et donc également une ligne.
- tu ne redéfinis pas la taille de police, donc on est à 16px. La ligne a donc, sous Firefox, une hauteur de 16px * 1,2 = 19px (arrondis)
- ton image ayant une hauteur de 10px, tu obtiens donc 9 pixels de vide répartis au-dessus et au-dessous de ton image.

Solutions
- la plus simple et la plus efficace : dire que tu ne veux pas que tes images soient traitées comme tu texte (display:block, par exemple). On se débarrasse ainsi de la ligne et tout fonctionne comme tu pourrais t'y attendre (dans le cas de ton tableau).
- sinon spécifier manuellement hauteur de ligne et/ou taille de police (line-height et font-size). Ici tu auras une autre modif à faire : par défaut, l'image est, comme le texte, assise sur la baseline, histoire de ménager un espace pour les jambages. Il te faudra donc la forcer à s'installer en bas de la ligne avec vertical-align:bottom.
Modifié par marcv (20 Jul 2009 - 10:02)
Sujet clos
Aller à