Bug ie: bordure autours d'une photo qui ne veut pas disparaitre

lorsque j'insére une image dans un div il reste un espace d'un pixel (a peu prés)entre l'image et la bordure du div, ce qui décale un peu ma mise en page.
Ce décallage n'éxiste pas sur Fire Fox.
J'ai bein sur essayé les

*{margin:0px; paddind:0px; border:0px}

mais ça ne suffit pas

j'ai déja entendu parler de ce problème sur un forum ou tuto. mais je n'arrive pas à le retrouver.

quelqu'un aurait il la solution ou le lien vers celle- ci
Merci à tous

bonjour

espace vertical ?

alors un vertical-align:top; ou bottom; devrait decollé l'image du baseline et faire disparaitre cette marge apparaissant generalement sous l'image.


espace horizontal ?
Si l'image est seul dans le div , alors appliqué un font-size:0;
autrement : accoller les tags ouvrant et fermant de la balise aux balises la precedent et la suivant. <div><img></div> au lieu de <div> <img> </div>
IE interprete cette espace et l'affiche , .. d'ou le font-size:0; pour le faire disparaitre si il nya aucun texte dans le conteneur .
Prevoir un font-size a<img> ( img {font-size:1em;}) eventuellement pour afficher le texte alternatif au besoin , pas tester dans IE ).

gc
Modifié par gcyrillus (24 Feb 2007 - 06:16)

bonjour

Alors pour préciser, l'espace est vertical: à droite de l'image voir image:


j'ai essayé vos recommandations:

HTML

<div id="Layer5">
	<div id="image" align="right" style=""><img src="dossier/image/image00.jpg"  width="203" height="271" /></div>
      
    </div>

CSS

#Layer5 {
position:relative;
	width: auto;
	height:500px;
	z-index:2;
	background: url(dossier/image/fond1.png) no-repeat;
	padding-top: 35px;
	padding-left:10px;
	border-right:#828282 thin solid;
	
}
#image {
	position:absolute;
	right:0px;
	top:27px;
	width:203px;
	height:271px;
	z-index:2;
	background-image:url(dossier/image/image00.jpg);
	font-size:0px;
        text-align:right;
}

J'ai créé une bordure artificielle au layer 5 pour mettre en évidence le fait que l'image se met à deux pixel de la bordure du calque sans raisons puisque j'ai positionné le calque en right:0px;

Avez vous une idée?

je dis ptetre une connerie mais pourquoi tu fais l'align dans le html ?

tu devrais essayer de le faire dans le css avec un float:right; margin:0px; padding:0px; dans un premier temps pour tester...

En fait j'essaye d'éviter au maximum d'utiliser float car c'est une vrai tanée à gérer je trouve et puis c'est chiant pour faire des designs évolutifs.

j'ai utilisé align: right pour tester mais normalement je n'en aurais pas besoin.

et j'ai commencé mon code CSS avec

*{ margin:0px; padding:0px; border:0px;}

qui normalement gére des le début les pb de ce genre...

Cela dit je viens d'essayé float:right et ça ne marche pas non plus.

alors peut etre que le pb ne viens pas de l'image mais du calque dans lequel elle est??...
je continu à chercher et acceuil vos propositions avec plaisir
Modifié par simon250 (24 Feb 2007 - 16:44)

Salut,
ça vient peut-être d'un pénible bug de décalage d'IE mais la
seule solution que j'aurais à te donner consiste à mettre un right:-1px
dans une feuille de style conditionnelle pour IE.
Attention l'attribut align est invalide en XHTML strict.
A tester sur IE6 et IE7 bien sûr.
Modifié par Hermann (24 Feb 2007 - 17:47)

Le pb se corse
j'ai changé le code pour ne mettre qu'une image et pas une image intégrée dans un calque (ce qui je l'imaginais pouvait regler certain problème).

Et bien l'image conserve toujours un espace d'au moins deux pixels avec la bordure du calque.
Alors c'est peut etre un pb du à:

right:0px

voici mon code
HTML:

<div id="Layer5">
	<img src="dossier/image/image00.jpg" style="float:right"  width="203" height="271" class="image" />
      
    </div>

CSS

#Layer5 {
position:relative;
	width: auto;
	height:500px;
	z-index:2;
	background: url(dossier/image/fond1.png) no-repeat;
	padding-top: 35px;
	padding-left:10px;
	border-right:#828282 thin solid;
	
}
.image{ 
position: absolute;
right:0px;
top:27px;
margin:0px;
border:0px;
padding:0px;
}

Donc là je suis juste complétement perdu....
si vous aviez une idée???

je n'ai pas utilisé de style conditionnel à IE car je ne sais pas trop bien m'en servir et j'ai eu comme l'impression que ça me faisait bugger sur safari.

cela dit j'ai réglé le pb en utilisant left:330 au lieu de right:0px.

le pb est réglé pour moi
Mais il ne l'est pas pour autant pour la gestion de right:0px par IE.
Si quelqu'un veut lui faire un sort je laisse le sujet ouvert