[Résolu] Overflow et float, problème avec IE

Bonjour à tous,
J'ai un problème avec les images en float qui débordent de leur conteneur DIV.
Sur la page d'exemple suivante, je veux que l'image soit entièrement dans le bloc blanc. Exemple 1

Je place donc un <hr class="spacer"/> avec un clear:both, sauf que comme mon menu flotte déjà à gauche, ça me ramène en dessous du niveau du menu. Exemple 2

J'utilise donc un overflow:auto (comme je l'ai lu dans un message de Laurent Denis, sur ce forum) : Exemple 3

Ca marche avec Opera et FF.
Mais avec IE, il y a un petit écart de 2 pixels entre le menu et le bloc contenu ??
Et plus étrange, dans IE 6 le texte "photo de la terre" n'apparaît pas d'emblée, mais juste quand on le sélectionne ou quand on scrolle vers le bas. Après seulement il reste apparent... C'est seulement chez moi, et ça vient d'où ce petit tour de magie ? Bizarre aussi, j'ai essayé avec IE 5.1 et là, l'affichage est normal (sauf la petite marge).

Sous Netscape, ça ne recouvre pas totalement, mais il faudrait peut être essayer avec autre chose que <hr>

Je précise que pour ce cas, j'utilise un tableau simple conteneur à l'intérieur de la div #chapeau. C'est peut être pas plus mal dans ce cas ci ?
Modifié par Alan (29 Dec 2005 - 16:06)

Bonjour,

l'espace est un three pixel jog (bug d'ie lié au haslayout. Il ne peut pas être supprimé, mais tu peux le camoufler en jouant sur les couleurs d'arrières-plan, ou en jouant sur une position relative (left: -3px) et une marge droite négative (margin-right: -3px)... (voir http://test.blog-and-blues.org/haslayout/tests/float6.html )

La disparition du texte à l'affichage est également un bug de haslayout, à régler en dotant le conteneur concerné d'une des propriété CSS lui conférant le layout, c'est à dire une hauteur, largeur, position absolue, flottante... ou un innocent zoom: 1 si IE5.0 Win n'est pas touché par le bug

Voir http://test.blog-and-blues.org/haslayout/trad_temp.html
Modifié par Laurent Denis (29 Dec 2005 - 15:31)

Ok merci, je vais cogiter les liens et faire que essais.

Le plus simple, dans ce cas précis, c'est peut être d'inclure un tableau dans la div #chapeau -> Exemple 4

<div id="chapeau">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="terre.jpg" alt="Le terre" width="50" height="50" align="left"> Photo de la terre 
</td>
</tr>
</table></div>

Quitte à lui donner une dimension si je veux y mettre du texte centrer

Merci,A+
Alain
Modifié par Alan (29 Dec 2005 - 16:13)

Ok merci, je vais cogiter les liens et faire que essais.

Le plus simple, dans ce cas précis, c'est peut être d'inclure un tableau dans la div #chapeau -> Exemple 4

<div id="chapeau">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="terre.jpg" alt="Le terre" width="50" height="50" align="left"> Photo de la terre 
</td>
</tr>
</table></div>

Quitte à lui donner une dimension si je veux y mettre du texte centré

Merci,A+
Alain
Modifié par Alan (29 Dec 2005 - 16:15)

Laurent Denis a écrit :

l'espace est un three pixel jog (bug d'ie lié au haslayout. Il ne peut pas être supprimé, mais tu peux le camoufler en jouant sur les couleurs d'arrières-plan, ou en jouant sur une position relative (left: -3px) et une marge droite négative (margin-right: -3px)...

Slt, j'ai pas mal galéré la deçut à cause de IE, voila comment j'ai résolu le truc :

#menu_v{
	position:relative;

	width: 13px ;
	height: 445px;
	float: left;
	margin: 0 0px; /*pour FF*/
	_margin:0 3px;/*pour IE*/
	left: 35px;
}