[XHTML] Espace bizarre sous image avec xhtml 1.1 et firefox

**lysandre** · 18/07/2008, 22h56

Voici un code tout simple avec une image de taile 112x84 dans un tableau de même taille contenant une seule cellule dont la couleur de fond est vert. Normalement on ne devrait pas voir le vert car l'image le recouvre, mais sous l'image on a un espace vert que je ne comprends pas. Cela se passe avec le doctype xhtml 1.1 et firefox et netscape.

J'ai une solution pour enlver l'espace mais qui n'est très satifaisante, c'est un peu du bricolage: il faut mettre l'attribut css vertical-align:bottom; pour l'image.

D'ou vient cet espace et comment l'enlever sinon?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
           "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head><title>Title here!</title></head>
<body style="border:0px; padding:0px; margin:0px;">
<table style="border:0px; padding:0px; margin:0px; width:112px;
 height:84px;" cellspacing="0">
<tr><td style="border:0px; padding:0px; margin:0px;
 background-color:#00FF00; height:84px; width:112px;">
<img style="border:0px; padding:0px; margin:0px;" src="imagesite/logo.png"
 alt="texte" />
</td></tr>
</table>
</body>
</html>

**4R416N33** · 19/07/2008, 01h05

Oui, c'est un soucis avec les tableaux contenant des images sous Firefox !

Solution N°1 :

Remplacer ton tableau par des div. Facile a dire, moins facile à mettre un oeuvre s'il s'agit d'un site terminé

Solution N°2 :

Inclure ton image dans une div :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
           "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head><title>Title here!</title></head>
<body style="border:0px; padding:0px; margin:0px;">
<table style="border:0px;padding:0px;margin:0px;width:112px;height:84px;" cellspacing="0" cellpadding="0">
<tr>
  <td style="border:0px; padding:0px; margin:0px; background-color:#00FF00; height:84px; width:112px;">
    <div style="height:84px; width:112px;border:0px; padding:0px;">
      <img style="border:0px; padding:0px; margin:0px;" src="imagesite/logo.png" alt="texte" />
    </div>
  </td>
</tr>
</table>
</body>
</html>

**Erwan31** · 19/07/2008, 01h21

Comme l'indique 4R416N33 il serait peut-être préférable de passer par une div.

La solution que tu as choisi (via le vertical-align n'est pas contre indiquée) comme toute solution CSS qui permettrait d'arriver au bon résultat
sans risquer d'amener des complications.

Ceci dit ton cas de figure (images dans un tableau) devrait nécessiter le passage à un doctype transitionnal qui a pour effet de supprimer les espaces sous les images dans les principaux navigateurs alternatifs (Firefox/Seamonkey, Opera et Safari). Pour les détails (en)
Pour IE il suffit de ne pas avoir d'espace ou de retour a à la ligne aprés l'image (... /></td> ou ... /></div>)

D'autre part à moins que tu aies réduit le code présenté, je ne vois ce qui justifie l'utilisation d'un Doctype XHTML1.1, le plus souvent celui-ci est mal employé et n'apporte strictement rien, surtou en étant servi en text/html...

> Passer en doctype XHTML1.0 transitionnal et ajouter cette meta pour éviter certains problème d'encodage:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

**defcon_suny** · 19/07/2008, 16h07

@Erwan31 :

Selon toi, l'initialisation des margin's et padding's en début de css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
*{
padding: 0;
margin: 0;
}

Pourrait-elle solutionner le problème d'un doctype non transitionnal?

**Erwan31** · 19/07/2008, 17h31

Envoyé par defcon_suny

@Erwan31 :
Selon toi, l'initialisation des margin's et padding's en début de css
pourrait-elle solutionner le problème d'un doctype non transitionnal?

Bonjour,
non, le bord inférieur de l'image se place sur la ligne de base du texte (vertical-align:baseline étant la valeur initiale) et laisse donc l'espace vertical nécessaire à l'affichage des jambages inférieurs de certaines consonnes comme le p le j ou le y pour une taille de texte donnée.

Dans la plupart des cas, il faut donc la faire se comporter comme un élément de block (et non plus inline) en lui attribuant un display:block
ou alors et c'est le cas si on a plusieurs images dans la même cellules,
un vertical-align:bottom (ou middle) pour qu'elle ne s'aligne plus sur la ligne de base.

**defcon_suny** · 19/07/2008, 17h55

Envoyé par Erwan31

Bonjour,
non, le bord inférieur de l'image se place sur la ligne de base du texte (vertical-align:baseline étant la valeur initiale) et laisse donc l'espace vertical nécessaire à l'affichage des jambages inférieurs de certaines consonnes comme le p le j ou le y pour une taille de texte donnée.

Dans la plupart des cas, il faut donc la faire se comporter comme un élément de block (et non plus inline) en lui attribuant un display:block
ou alors et c'est le cas si on a plusieurs images dans la même cellules,
un vertical-align:bottom (ou middle) pour qu'elle ne s'aligne plus sur la ligne de base.

Merci pour cette information

bon week-end à toi

**Erwan31** · 19/07/2008, 18h10

Envoyé par defcon_suny

Merci pour cette information

bon week-end à toi

Merci toi aussi

J'ai oublié de préciser que le mode almost standard (actif sur les principaux
browsers alternatifs cités) déclenché en présence d'un doctype transitionnal a
justement été inventé par Mozilla pour pallier à ce cas de figure souvent
problématique des images incluses dans un tableau.

**lysandre** · 19/07/2008, 18h50

Merci à tous pour vos réponses

.

Le truc du div marche bien aussi, par contre c'est assez bizarre avec le div, on a un espace en bas de l'image quand on met vertical-align:bottom et dans IE...

Pour répondre à Erwan, j'ai préféré utiliser un doctype xhtml 1.1 car il me semble que c'est le dernier en date et comme je suis en train de refaire mon site, je préfères trouver la façon de programmer qui correspond au dernier doctype que de choisir le doctype de façon à résoudre un des problèmes que je rencontres, quitte à provoquer un autre problème...
Il est vrai que le transitionnal regle mon pb, par contre cela provoque un autre pb ailleurs (effectivement c'est un code hyper-simplifié que je vous ai donné).
Je ne connais pas les spécificités de chaque doctype, donc je code comme d'habitude et j'essaie de solutionner les petits tracas qui surviennent

De plus j'aime bien le principe du doctype strict, une façon stricte d'écrire les choses en espérant que cela mène à une façon stricte de l'interpréter (pour l'instant ce n'est pas le cas mais espérons que ça vienne

)

Personnellement, je trouve qu'avec le html on se complique beaucoup la vie pour rien: plusieurs interprétations différentes suivant le doctype, le navigateur...et de plus je ne trouve pas ça très adapté à la partie création graphique d'un site web.

**Erwan31** · 19/07/2008, 20h21

Ben permet moi de te dire que le choix du XHTML1.1 même si c'est la dernière version, est un erreur. Je n'ai pas trop le temps de développer, je te conseil de lire cet article.

Donc si tu veux utiliser le strict dont la démarche de validité a l'avantage d'avoir certaines vertus pédagogiques (séparation totale de la présentation (CSS) et du couple structuration/contenus ((X)HTML ), il faudra déclarer de nouveau td img {vertical-align:bottom;}.

**lysandre** · 20/07/2008, 11h25

Envoyé par Erwan31

Ben permet moi de te dire que le choix du XHTML1.1 même si c'est la dernière version, est un erreur. Je n'ai pas trop le temps de développer, je te conseil de lire cet article.

Donc si tu veux utiliser le strict dont la démarche de validité a l'avantage d'avoir certaines vertus pédagogiques (séparation totale de la présentation (CSS) et du couple structuration/contenus ((X)HTML ), il faudra déclarer de nouveau td img {vertical-align:bottom;}.

Ok je suis convaincu

, je vais utiliser le 1.0 strict.
Moi qui croyais que le temps du n'importe quoi en html allait être révolu...

J'en profite (sournoisement

) pour te demander ton avis sur ce probleme http://www.developpez.net/forums/sho...d.php?t=588385 que je n'arrive pas à résoudre depuis quelques jours, et rien trouvé sur le net...(le doctype est 1.1 mais ca fait pareil avec 1.0 strict ou même sans doctype).

[XHTML] Espace bizarre sous image avec xhtml 1.1 et firefox

HTML

Discussions similaires

Partager

Partager