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

Version imprimable

26/07/2006, 19h07
Celeri

[CSS] Espace résiduel entre une image et le bord du div sous IE
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:

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.
26/07/2006, 20h50
la.sophe
hello,

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

1 2 3 img { display : block ; }
26/07/2006, 21h16
Celeri

Hélas ... cela ne change rien !?
26/07/2006, 23h36
Auteur
bonjour,

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

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

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

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:

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

27/07/2006, 19h27
Celeri
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:

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:

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

Je pense que cela doit impacter pas mal de monde ...
27/07/2006, 19h54
Auteur
Citation:

Envoyé par Celeri

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

Code:

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

Citation:

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:

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>
28/07/2006, 09h31
masu
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:

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>
28/07/2006, 21h10
Celeri

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