Probleme sous IE : margin left non respecté pour une image pos left

Bonjour tout le monde,
Voila j'ai un problème de positionnement d'image sous IE.

Le principe est que j'utilise un petit logo que je place en position left et que j'entoure par du texte.
Sous firefox aucun probleme mais sous IE l'affichage est aleatoire et le margin left n'est pas prise en compte. En effet, selon le rafraichissement de la page l'image est correctement placée ou non .. Dans certains cas l'image se colle à la bordure gauche et ne respecte par le margin ..
Je ne comprends vraiment pas ..

La page est la suivante : ici
L'image qui pose pb est le petit logo de chaque document lorsque l'on lance une recherche ..

SI vous aviez une idée
JE vous remercier par avanceeee

Voici mon css associé :

div#recherche div#resultat {
	position: relative;
	border: 1px solid #CCCCCC;
	margin:7px;
}

div#resultat div.document {
	position: relative;
	border: 1px dashed #CCCCCC;
        margin:7px;
}

div#resultat div.document img.logoDoc {
	float:left;
	margin:14px 14px 7px 14px;
}

div#resultat div.document h3{
	position: relative;
        margin-left:14px;
}

div#resultat div.document p.infoDoc{
	position: relative;
        margin-left:14px;
        margin-top:-5px;
}

div#resultat div.document p.descDoc{
	position: relative;
        clear:both;
}

Voici le code html :

<div class="document">				

<img class="logoDoc" src="./images/pics/folderMac.gif"/>
												
<h3>blabla</h3>
							
<p class="infoDoc">blabla</p>
								
<p class="descDoc">blabla</p>
															
</div>

Modifié par kvndevils (23 Feb 2008 - 18:16)

Bonsoir,

C'est étrange, ce problème a l'air spécifique à IE7 car je n'ai pas du tout réussi à l'obtenir avec IE 6 et 5.5.

Apparemment IE 7 a du mal à calculer le placement de l'image correctement. Pour l'aider:
- donner des dimensions à l'image si ça n'est pas déjà le cas;
- jouer avec le HasLayout pour voir si ça l'aide...

Pour le HasLayout, je précise à tout hasard que la FAQ en parle.

PS: Du texte #FF9A4F sur fond blanc, il faut vraiment chercher à être illisible. À tester sur un écran de portable avec les yeux placés un tout petit peu trop haut.

Merci florent pour ta reponse je vais essayer de creuser ces voies la
Sinon de quelle couleur parles tu je ne vois pas ?

kvndevils a écrit :
Sinon de quelle couleur parles tu je ne vois pas ?

Les labels du formulaire de recherche... qui ne sont pas des éléments labels, d'ailleurs (dommage...). Bref, je parle des textes en orange à gauche de tes contrôles de formulaire.
Modifié par Florent V. (23 Feb 2008 - 20:05)

C'est vrai que c'est pas bete ..
Ca resoud pas mon probleme sous IE ca !!
merci quand meme pour l'info des labels

Salut,

Je crois que ce sont en effet des problèmes de contexte de formatage et un soucis pas bien compris dans ie7
Alors une piste:

#gauche{
...
overflow: hidden /* auto ne passe pas bien sous ie6*/
}

div#resultat div.document {
...
	overflow: hidden;

}

Et dans le code, là je n'ai pas bien compris mais pour ie7 si on ne place quelque chose (même n'importe quoi) entre les blocs resultat et document, le premier bloc document ne respecte pas les margins

				<div id="resultat">
					<h3>>> 192 DOCUMENTS TROUVES</h3>	
							<div class="document">	

Bah en espérant que ça t'aide un peu, heu passe un petit coup ton code au validateur aussi

Et sympa la mise en page

Salut ghots merci pour ton aide
Je n'ai pas bien compris ce que tu as voulu dire en parlant du code de ma page avec les resultats et autres ...
Merci encore

Salut,

De mémoire il me semble que dans ton html si tu laisses

<h3>>> 192 DOCUMENTS TROUVES</h3>	

<div id="resultat"><div class="document">
...
	

avec les modifs que je t'ai proposé, le premier bloc element ne respecte pas les margins et prend 100% du width. Si tu insères n'importe qu'elle balise entre ces 2 blocs dans ton code (<br />, </hr>, <span></span>...) les choses rentrent dans l'ordre Pourquoi? Ben je n'en sais rien !!!
Tant qu'à faire j'ai juste décalé ton <h3>

Dites, il serait bon d'échapper les >> en &gt;&gt;, à tout hasard.