Problème de marges avec ie7

Bonjour à tous,
j'ai un problème de marges avec ie7 (j'aurais aimé tester mon site, qui doit être fonctionnel avec ie6, mais je ne sais pas comment me le procurer), donc voilà le srceen sous ie7 :
http://jujub55.free.fr/Echange/pageweb_defauts_ie7.jpg
Et ci-dessous un screen sous Firefox (le résultat est le même avec opera et safari )
http://jujub55.free.fr/Echange/pageweb.jpg

Le code ci dessous :
XHTML :

<div id="pref">
<img src="titre_prefs_03.gif" alt="" id="titre_vos_prefs"/>
<img src="images_prefs_03.jpg" alt="" class="imgsprefs"/>
<hr class="barres_prefs"/>
<img src="images_prefs_07.jpg" alt="" class="imgsprefs"/>
<hr class="barres_prefs"/>
<img src="images_prefs_09.jpg" alt="" class="imgsprefs"/>
<hr class="barres_prefs"/>
<img src="images_prefs_11.jpg" alt="" class="imgsprefs"/>
</div>

CSS :

#pref {
	width:315px;
	height:347px;
	border-style:solid;
	border-color:#000000;
	border-width:1px;
	background-color:#cecacb;
	margin-left:318px;
	margin-top:-350px;
}

#titre_vos_prefs {
	padding-bottom:1px;
}

.barres_prefs {
	margin:0;
	width:234px;
	float:right;
	color:#9d9d9d;
}
.imgsprefs {
	display:block;
	width:79px;
}

Si vous pouviez m'aider à régler mon problème ça serait très sympathique de votre part.
Merci d'avance.
Ju.

PS : ma page est valide W3C XHTML strict 1.0 et CSS
Modifié par juju_b55 (20 Apr 2009 - 12:55)

- Pour tester avec IE6 (et éventuellement d'autres versions de IE), utilise multiple IE de tredosoft : http://tredosoft.com/Multiple_IE

- Plutôt que de créer une classe .barres_prefs utilise plus simplement le sélecteur #pref hr ça simplifie le HTML (et ça fait du HTML en moins à télécharger...)

#pref hr {
	margin:0;
	width:234px;
	float:right;
	color:#9d9d9d;
}

- Pour ne pas qu'il y ait d'espace indésirable avec IE, le plus simple c'est de ne pas mettre d'espace blanc entre les balises img et hr.

<div id="pref">
<img src="titre_prefs_03.gif" alt="" id="titre_vos_prefs"/>

<img src="images_prefs_03.jpg" alt="" class="imgsprefs"
/><hr /><img src="images_prefs_07.jpg" alt="" class="imgsprefs"
/><hr /><img src="images_prefs_09.jpg" alt="" class="imgsprefs"
/><hr /><img src="images_prefs_11.jpg" alt="" class="imgsprefs"
/>
</div>

- Dernier truc, pense à bien remplir les attributs alt de tes images, ne serait-ce que pour le référencement et l'accessibilité

@+
Modifié par laruiss (20 Apr 2009 - 17:25)

Salut,

Tu peux lire cet article, ton problème vient certainement de ce qui est décrit dedans.

Salut !
Merci pour vos réponses, mais malheureusement je n'arrive pas a supprimer ces marges sous ie...
j'ai clarifié mon code avec ce que tu a posté laruiss et c'est plus propre mais toujours ces marges... j'ai essayé d'enlever les espaces entre <hr> et <img /> mais rien n'y fait, j'ai aussi tenté de mettre des marges négatives comme sur le tuto dont tu m'a passé le lien Agylus mais toujours pareil de plus cela influence firefox...

PS : Merci pour le tuyau IE6
Modifié par juju_b55 (20 Apr 2009 - 22:39)

Hey !
J'ai résolu mon problème en substituant les <hr /> par des border-bottom, en ayant bien sûr appliqué des boîtes
le résultat est le même, mais avec une compatibilité sous IE, cependant j'ai toujours des pb de marges sous ce navigateur à d'autres endroits de ma page