[RESOLU] Problème de clear sous Firefox mais ok sous IE

Bonjour,
Normalement les problèmes arrivent le plus souvent sous IE, mais la c'est avec Firefox.

J'ai des blocs d'annonces avec une image en float et un clear en dessous pour permettre l'agrandissement du bloc.
Le problème se manifeste avec le premier bloc qui est énorme!

Je ne comprends vraiment pas pourquoi
Une âme charitable pourrait-elle étudier ma page et m'expliquer ce qui coince?

Voici la page : http://www.bluemantella.com/indexOC.htm

Un grand merci d'avance
Modifié par Soltan13 (08 Jan 2007 - 18:18)

À vue de nez, il s'agit d'un problème de délimitation du champ d'application du clear. Si tu regardes bien, tu verras que la partie basse (qui contient un clear quelquechose) se place juste un peu plus bas que la colonne flottante de droite.

Laurent Denis explique tout ça dans Float, clear et contextes de formatage. Attention, c'est un petit peu technique.

Deux solutions : utiliser un contexte de formatage bloc pour délimiter le champs d'application du clear, ou bien ne pas utiliser de clear mais un autre moyen pour éviter le dépassement des flottants (cf. sur le dépassement des flottants).

Merci pour cette analyse et surtout pour m'avoir guidé ...
Si je supprime un hr+clear et que je met un "overflow: auto" pour le bloc conteneur... ça marche pour Firefox, mais maintenant j'ai le problème avec IE 6

Je vais faire le newbe mais comment faire pour que le clear soit pris en compte par IE et pas par Firefox (je garde le "overflow: auto") avec la même css ?

Soltan13 a écrit :
Je vais faire le newbe mais comment faire pour que le clear soit pris en compte par IE et pas par Firefox (je garde le "overflow: auto") avec la même css ?

Euh... le clear est pris en compte par les deux. Le problème, c'est sur la délimitation du champ d'action de ce clear. Dans l'idéal, il faudrait appliquer un contexte de formatage bloc au bloc de contenu principal (colonne centrale). Le problème, c'est que ça risque de ne pas être suffisant pour IE6. Sauf si on a un HasLayout sur ce même bloc, ce qui n'a pas que des inconvénients mais permet d'émuler un contexte de formatage avec IE, si je me souviens bien. Donc, on utilisera un contexte de formatage (via la propriété overflow) en standard, et un HasLayout (via une largeur fixe, par exemple) pour Internet Explorer 6 et inférieurs (on ciblera ce navigateur via des commentaires conditionnels).

Heu... ça doit pas être super clair. Disons que ça demande de connaitre quelques notions un peu pointues. Pour ça, l'article de Laurent Denis est la meilleure ressource que je connaisse.

Sinon, on se passera des clear (si on les trouve trop difficiles à gérer), et on utilisera un overflow sur chacun des blocs de news + encore du HasLayout pour IE6.
Hum... pas sûr que ça soit plus clair.

Bonjour,

Sans être "puriste" pouquoi pas:

html>body hr {
   clear: both;
}

pour IE6?

ou plus proprement en commentaire conditionnel

<!--[if lt IE 7.0]>
<style type="text/css">
hr{
clear: both;
}
</style>
<![endif]-->

Modifié par overflow (05 Jan 2007 - 08:40)

C'est drôle ce code ne fonctionnait pas chez moi :

html>body hr {
   clear: both;
}

Alors que celui-ci fonctionne très bien :

<!--[if lt IE 7.0]>
<style type="text/css">
hr{
clear: both;
}
</style>
<! endif -->

Un grand merci à toutes les personnes qui ont pris un peu de leur précieux temps pour m'aider