[CSS] Espace résiduel entre une image et le bord du div sous IE

**Celeri** · 26/07/2006, 19h07

Bonjour,

Ce que je souhaite faire : placer une image dans le coin en haut à droite d'un div conteneur.
Sous IE6, j'ai un espace résiduel d'environ 2 pixels entre le bord droit de l'image et celui du div !?
L'image n'est donc pas contre le bord du div.
Le résultat est ok sous Firefox 1.5

Le code est très simple :

Code :

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

1
2
3
<div style="width: 200px; height: 150px; background-color: green;">
    <img style="float: right;" src="MonImage.png" alt="..."/>
</div>

J'utilise un positionnement par float.
J'ai mis partout des margin:0; padding:0; cela ne change rien.

Merci de votre aide.

**la.sophe** · 26/07/2006, 20h50

hello,

essaye de préciser un attribut css à ta balise image :

Code :

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

1
2
3
img {
display : block ;
}

**Celeri** · 26/07/2006, 21h16

Hélas ... cela ne change rien !?

**Auteur** · 26/07/2006, 23h36

bonjour,

ajoute les attributs hspace (espace horizontal) et vspace (espace vertical) dans la balise img

Code :

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

1
2
 
<img hspace="0" vspace="0" style="float: right;" src="MonImage.png" alt="..."/>

**masu** · 27/07/2006, 15h49

je n'ai pas observé cet espacement? Ton image fait elle bien exactement 200*150?

Code :

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

1
2
3
<div style="width: 200px; height: 150px; background-color: green; border:1px solid #00e;">
    <img style="float: right;" src="prix_help.png" width="200" height="150" alt="..."/>
</div>

sinon essai d'enlever toute les marges en ajoutant ca au debut de ta feuille de style

Code :

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

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

**Celeri** · 27/07/2006, 19h27

Merci à tous et particulièrement à Auteur qui a trouvé le truc.

Mais je pense que certain n'ont pas bien compris mon problème, je n'ai peut être pas été assez clair.

Le scénario était de placer une petite image dans le coin en haut à droite d'un div conteneur (de dimension plus importante, fond coloré).

Mais j'ai encore plus simple pour mettre en évidence le pb.

Il suffit simplement d'afficher dans une page html (vide) une image avec "float".
Mais 2 images sont encore mieux.
Voici le code super compliqué :

Code :

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

1
2
3
4
<body>
        <img style="float: left; width: 21px; height: 21px;" src="bouton1.png"/>
        <img style="float: left; width: 21px; height: 21px;" src="bouton2.png"/>
</body>

Ce code ne permet pas de mettre cote à cote les 2 images avec IE.
Il faut rajouter de vieilles balises (HTML4 : deprecaded) comme le propose Auteur :

Code :

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

<img hspace="0" vspace="0" style="float: left; ...

Je pense que cela doit impacter pas mal de monde ...

**Auteur** · 27/07/2006, 19h54

Envoyé par Celeri

Il faut rajouter de vieilles balises (HTML4 : deprecaded) comme le propose Auteur :

Code :

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

<img hspace="0" vspace="0" style="float: left; ...

Je pense que cela doit impacter pas mal de monde ...

les attributs hspace et vspace n'ont à ma connaissance pas d'équivalent en CSS. Sont-ils acceptés par le W3C ?? Ils sont peut-être dépréciés mais utiles

.

Envoyé par Masu

je n'ai pas observé cet espacement? Ton image fait elle bien exactement 200*150?

il est très faible : 1 ou deux pixels à gauche et à droite de l'image : tu as une fine bordure verte.

Vérifie avec ce code :

Code :

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

1
2
3
4
 
<div style="width: 200px; height: 150px; background-color: green;">
    <img style="float: right;width: 200px; height: 150px;" src="MonImage.png" />
</div>

**masu** · 28/07/2006, 09h31

je suis arrivé a voir le espaces en plus dont tu parle. Pour cela j'ai enlever mon DTD.

Donc le simple fait de rajouter un dtd a ta page normalement devrait regler la chose.

par exemple

Code :

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

1
2
3
4
5
6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>[...]</head>
<body>[...]</body>
</html>

**Celeri** · 28/07/2006, 21h10

Ah oui je voulais aussi regarder de ce coté ... mais manque de temps.

Merci pour l'info et j'ai pu constater que cela supprime cet espace mais en plus cela bouge un chouilla plein d'autres choses ...
Je ne pensais pas une telle influence ...

[CSS] Espace résiduel entre une image et le bord du div sous IE

CSS

Discussions similaires

Partager

Partager