espace entre deux divisions

**qdaemon_fr** · 12/11/2008, 21h07

Bonjour à tous

soit la page : http://qdaemon.free.fr/test.htm
dont le code est le suivant :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
	   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
 
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 </head>
<body>
 
 
<div><img src="img.jpg" alt="k"/></div>
<div><img src="img.jpg" alt="k"/></div>
 
</body>
</html>

Avec IE, les deux images (deux carrés noirs) se touchent ce qui semble
être le résultat correct.
Avec FF, il y a un espace entre les deux.
Si j'enleve le doctype, les deux images se touchent qq soit le navigateur.

Que dois-je faire pour avoir les deux images qui se touchent en gardant le
doctype ?

merci
Julien

**qdaemon_fr** · 12/11/2008, 21h19

Bon j'ai travaillé un peu et modifié la page pour être w3c compliant ;
ca donne : http://localhost/www/test2.htm

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
<!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="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>le titre</title>
   </head>         
 
<body>
<div><img src="img.jpg" alt="k"/></div>
<div><img src="img.jpg" alt="k"/></div>
 
</body>
</html>

mais ça ne change rien à mes carrés noirs !!

**Bisûnûrs** · 12/11/2008, 21h22

Tu as deux choix :

- Soit tu donnes une hauteur à tes div, la même que les images.
- Soit tu mets tes images en display:block.

**qdaemon_fr** · 12/11/2008, 23h07

ok ca gaze.
Et pour ma culture, quel navigateur a juste ? et si c'est FF, pourquoi ?

merci

**Bisûnûrs** · 12/11/2008, 23h25

Je ne dirais pas qu'un ou l'autre navigateur a juste, simplement qu'ils n'interprètent pas de la même manière.

Firefox dans ce cas, laisse de la place aux caractères à jambes (q, j, g, ...) qui peuvent éventuellement se trouver à côté de l'image. En passant l'image à block par exemple, on assure au navigateur que l'image n'aura pas de texte à ses côtés, donc il supprime cet espace devenu inutile.

**qdaemon_fr** · 12/11/2008, 23h50

Limpide... mais pas trivial !

merci
Julien

espace entre deux divisions

HTML

Vue hybride

Discussions similaires

Partager

Partager