<img>, background-color et IE6

Version imprimable

Salut,

Pouvez-vous m'expliquer pourquoi IE6 n'encadre pas parfaitement une image en hauteur ? Par exemple,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <style>
          .fond {background-color:#EBF8FF;}
        </style>
    </head>
    <body>
        <div class="fond">
            <img src="une_image.jpg" />
        </div>
    </body>
</html>

???

13/02/2008, 14h38
Bisûnûrs

Mets display:block sur ton image.

Mets un DOCTYPE complet :
http://xhtml.developpez.com/faq/?pag...#html_doctypes
13/02/2008, 15h53
picwic

Le display:block appliqué à l'image fonctionne Nickel! Merci. :king:

Concernant le DOCTYPE, a t'il une importance particulière dans ce cas précis?
13/02/2008, 16h45
Bisûnûrs

Dans ce cas précis, non, mais il est toujours bien d'anticiper les différences d'interprétation, quel que soit le cas.
13/02/2008, 16h57
picwic

Ok merci pour la précision sur le DOCTYPE.

En revanche, si je veux coller d'autres éléments à la suite de mon image (sur la même ligne), y'a comme un souci puisque le display:block fait revenir à la ligne... non ?!
13/02/2008, 16h58
Bisûnûrs

Enlève le display et essaie de rajouter vertical-align:baseline.
13/02/2008, 17h07
picwic

Pas mieux.. Il n'y a pas une histoire de line-height ?
13/02/2008, 17h19
Bisûnûrs

Non, c'est à cause de la place réservée aux caractères à jambes, comme le q, le j, le g, etc.

Sinon essaie de remplacer baseline par text-botom.
Au pire tu peux toujours remettre le display:block et rajouter float:left.

Effectivement, j'avais déjà entendu parler de cette histoire de jambes... umpff..

Sinon, le vertical-align:text-bottom ne fonctionne pas plus.

Quand à la solution float, elle affecte la hauteur du DIV englobant qui ne prend plus en compte celle de l'image.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> .fond {background-color:#EBF8FF;} img {display:block;float:left;} </style> </head> <body> <div class="fond"> <img src="une_image.jpg" /> <span>test</span> </div> </body> </html>
Alors que faire...? :?

13/02/2008, 17h51
Bisûnûrs

Rajoute overflow:auto sur ton div.
13/02/2008, 18h03
picwic

Citation:

Envoyé par Bisûnûrs

Rajoute overflow:auto sur ton div.

Good sous FF mais IE résiste...
13/02/2008, 19h18
Candygirl

Citation:

Envoyé par picwic

En revanche, si je veux coller d'autres éléments à la suite de mon image (sur la même ligne), y'a comme un souci puisque le display:block fait revenir à la ligne... non ?!

Dans ce cas tu peux effectivement jouer avec le vertical-align (sur l'image et pas le conteneur):

Code:

img {vertical-align:middle;}

par exemple. Mais cela ne fonctionnera que tant que le line-height calculé et inférieur à la hauteur de l'image.

Citation:

Envoyé par picwic

Il n'y a pas une histoire de line-height ?

Oui, tu peux jouer sur le line-height, ou le font-size (puisque celui-ci sert de calcul pour le line-height). Par exemple:

Code:

.fond {font-size:0;}

Par contre, si ton image ne s'affiche pas pour x raison et que c'est le text de remplacement qui va être afficher cela va poser problème sur certains navigateurs qui n'afficheront plus le alt vu le font-size nul (pas sur IE puisqu'il l'affiche indépendament). il pourrait donc être judicieux de le spécifier que pour IE.

Mais finalement le plus simple est d'éviter qu'IE considère qu'il y a "du texte" en collant tes balises dans le html:

Code:

<div class="fond"><img src="une_image.jpg" /></div>

(en fait il semblerait que cela soit juste la fermeture qui doit être collée)
13/02/2008, 22h54
picwic

Candygirl, merci pour ces explications. Je vois comment adapter de mon côté.