Float, images et IE

Bien le bonjour !

Je sèche devant un problème pour lequel je ne peux dire qu'une seule chose : "argh "

J'ai simplifié le code au maximum. Regardez plutôt. J'ai un DIV qui contient 2 éléments HTML en float left. Si ces éléments sont des P, SPAN ou autre, ils sont collés ensemble (normal, ils sont float left).

Eh bien s'il s'agit de la balise <img> , ils ne sont plus collés. Il subsiste des marges totalement incongrues qui n'ont rien à faire là. J'ai pioché un moment et j'ai trouvé " The IE Doubled Float-Margin Bug ", mais ce n'est pas ça. C'est vraiment le tag <img> qui place ces marges comme par magie.

Mais.... mais au secours !

CSS + HTML

<style type="text/css">
div.test {
border: 1px solid blue;
height: 1%;
}
div.test img, div.test p, div.test span {
border: 1px solid red;
float: left;
}
</style>

<div class="test">
	<img src="../imgs/minus5.gif" />
	<img src="../imgs/globe.gif" />
</div>

<div class="test">
	<p>A</p>
	<p>B</p>
</div>

<div class="test">
	<span>C</span>
	<span>D</span>
</div>

Si un génie trouve l'illumination, puisse-t-il la partager avec les simples êtres humains que nous somes. Merci

rekam

Je peut pas regarder là de suite, mais en mettant les padding et margin à zéro ça donne quoi?

J'ai oublié de le préciser, mais padding: 0 et margin: 0 ne fonctionne pas, pas plus que display: inline.

Et ce, que ce soit dans le div ou dans les éléments, ou dans tous.

J'ajouterai que ce n'est pas le " title " de l'image qui génèrerai des espaces (après tout, il s'agit aussi d'un bloc qui apparaît on-mouse-over). J'ai essayé de mettre des titles pour les P et les SPAN, et il n'y a pas de MMM (marges magiques de m....)

La vérité est donc ailleurs.... mais où ?

Bonjour,

Entourer les images d'un span et faire flotter celui-ci (et non img)

Ou plus simplement laisser les images en flux (puisque ce sont des éléments de type en ligne)

Le fond du problème est lié au haslayout et à la prise en compte par IE des espaces non significatifs présents dans le code HTML : mettre les <img... > des images flottants sur une seule ligne sans espace dans le code HTML permet de le vérifier.

Salut,

merci, mettre les images dans des span fonctionne... Par contre, tout sur la même ligne (sans span) n'enlève pas les espaces. Qu'on se le dise ! En tous les cas, merci bien!

rekam a écrit :
Par contre, tout sur la même ligne (sans span) n'enlève pas les espaces.

Si. Mais tout dépend du mode strict/quirks et de quelques paramètres de robustesse similaires