<img>, background-color et IE6 [FAQ]

**picwic** · 13/02/2008, 13h07

Salut,

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

Code :

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

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>

???

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

Mets display:block sur ton image.

Mets un DOCTYPE complet :
http://xhtml.developpez.com/faq/?pag...#html_doctypes

**picwic** · 13/02/2008, 15h53

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

Concernant le DOCTYPE, a t'il une importance particulière dans ce cas précis?

**Bisûnûrs** · 13/02/2008, 16h45

Dans ce cas précis, non, mais il est toujours bien d'anticiper les différences d'interprétation, quel que soit le cas.

**picwic** · 13/02/2008, 16h57

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 ?!

**Bisûnûrs** · 13/02/2008, 16h58

Enlève le display et essaie de rajouter vertical-align:baseline.

**picwic** · 13/02/2008, 17h07

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

**Bisûnûrs** · 13/02/2008, 17h19

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.

**picwic** · 13/02/2008, 17h40

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 :

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.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...?

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

Rajoute overflow:auto sur ton div.

**picwic** · 13/02/2008, 18h03

Envoyé par Bisûnûrs

Rajoute overflow:auto sur ton div.

Good sous FF mais IE résiste...

**Candygirl** · 13/02/2008, 19h18

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 :

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

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.

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 :

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

.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 html :

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

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

(en fait il semblerait que cela soit juste la fermeture qui doit être collée)

**picwic** · 13/02/2008, 22h54

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

<img>, background-color et IE6 [FAQ]

CSS

Discussions similaires

Partager

Partager