[résolu] Bug Float sous IE7

Hello,

J'ai un bug qui revient souvent sous IE7 mais impossible de trouver des infos à son sujet.

Pour faire simple en appliquant un float:left à une image, le texte qui suit se place bien à droite de l'image sous IE7 alors que sur les autres navigateurs le bloc de texte passe sous l'image.

Sincèrement je pense que vous allez vous foutre de moi car ce problème doit être archi connu vu la simplicité de cette mise en page mais là j'avoue je sèche.

#content #image{
	float:left;
}
#content .text{
	width:440px;
}

D'habitude pour corriger ce problème j'applique un float:left aussi sur mon bloc texte mais si pouvais comprendre à quoi correspond le problème j'avouerai que je me sentirai moins bête ce soir !

Mea culpa
Modifié par AspiGeek (11 Aug 2009 - 13:52)

Bonjour,

Alors ça ne va pas te surprendre:
- Le comportement dans Firefox, Safari, Opera, Chrome, et IE8 est normal.
- Le comportement dans IE 6 et 7 est anormal. C'est une spécificité de ce navigateur due au HasLayout.

Quand tu as un flottant suivi d'un texte relativement long, ce texte va se disposer autour du flottant (à droite puis en bas si le flottant est en float:left). Par défaut, il ne va pas décider tout seul de se comporter comme une «colonne» de texte qui serait entièrement repoussée par le flottant.

C'est le comportement normal d'un flottant: il ne repousse pas les blocs, il repousse uniquement leur contenu (texte, IMG, OBJECT, etc.).

Pour qu'un élément de type bloc adapte sa largeur à la présence de flottants placés avant lui dans le code, il faut utiliser un contexte de formatage. Cela se fait typiquement avec la propriété overflow. Un overflow:hidden, par exemple.

Dans IE6, pas de contexte de formatage. Par contre, le HasLayout a sensiblement le même effet (en plus de plein d'effets secondaires potentiels).
Dans IE7, le contexte de formatage avec overflow:hidden est pris en compte, ET le HasLayout également.
Dans IE8, le HasLayout a été terrassé, Alléluia.

Merci Florent pour cette réponse, je n'avais pas percuté le problème du HasLayout que je connaissais pourtant avec ton excellent article sur ton site.

Edit: Finalement ce n'est pas mon problème ça vient de mon code en amont. Désolé pour la perte de temps...
Modifié par AspiGeek (11 Aug 2009 - 14:24)