28172 sujets

CSS et mise en forme, CSS3

Design flotant en deux colonnes : Bug IE6 et IE7

Bonjour,

J'essaye de modifier un design en deux colonnes existant pour que le contenu soit d'une hauteur au moins équivalente à ma barre de menus (quand cela se produit).
Le design fonctionne sur le même principe que le gabarit suivant : http://www.alsacreations.com/static/gabarits/modele04.html

Cependant IE6 et IE7 ne donnent pas le même résultat que les autres navigateurs :

Firefox :
upload/38427-firefox.jpg

IE6:
upload/38427-ie7.jpg

Ce qui est étrange c'est qu'en supprimant la propriété CSS background-color cela se met à fonctionner correctement. Il s'agit peut-être d'un problème hasLayout mais je ne parviens pas à comprendre pourquoi.

Quelqu'un aurait une idée?

Merci d'avance pour votre aide,
Cédric

Voilà le code de la page :

<html>
<head>
<title>Test</title>
<style type="text/css">
div#c {
    border: 2px solid #ff0000;
	width: 95%;
}
div#cg {
    width: 226px;
    float:left;
    border-top: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
}
div#cd {
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
    border-bottom: 2px solid #000000;
    background-color: #ffffff; /* Si supprimé, alors ok dans IE6 */
    margin-left: 238px;
}
div#spacer {
    clear: both;
}
</style>
</head>
<body>
<div id="c">
    <div id="cg">
        menu<br />menu<br />menu<br />menu<br />menu<br />menu<br />
        menu<br />menu<br />menu<br />menu<br />menu<br />menu<br />
    </div>
    <div id="cd">
        contenu
        <div id="spacer"></div>
    </div>
</div>
</body>
</html>
Hello,

Alors pour commencer, on va oublier IE6: on est en 2011 hein, on ne s'accroche pas désespérément aux cadavres de canassons putrescents, merci. Smiley smile

Ensuite, il me semble que ton bloc #spacer est placé au mauvais endroit (comme dernier enfant de #cd plutôt que comme dernier enfant de #c), ce que tu sembles avoir corrigé sur le site que tu donnes comme exemple.
Salut,

En fait sur le site il est placé à un endroit qui ne pose pas de problèmes à IE6 et IE7. C'est à dire en dernière position dans le conteneur principal.
C'est d'ailleurs la même chose sur les gabarits alsacreations.

Mais visuellement je souhaite le placer dans le bloc ayant l'id "cd". Cela me permettrait d'avoir un bloc donc le contenu s'adapte à la taille du menu. Ce n'est pas exemple pas le cas sur la page suivante :

http://www.walldir.com/artistes/leonard-de-vinci.html

Après ça n'est peut-être pas possible...

Cédric
C'est en partie possible mais ce n'est pas avec des flottants et du clear:both que tu vas réaliser ça (ce n'est pas fait pour).

Tu peux éventuellement utiliser la méthode des colonnes factices (gabarits 5, 6, 7 et 8).

Ou bien tu peux utiliser display:table-cell pour demander à tes DIV de se comporter comme des cellules de tableau (qui ont pour propriété de s'adapter à la hauteur l'une de l'autre).
Ok si je comprend bien le clear ne s'applique qu'aux éléments adjacents, donc ça n'est pas "normal" de positionner dans le div de classe "cd".

Par contre tous les navigateurs "récents" semblent bien appliquer le clear malgré le positionnement dans un sous-div comme dans mon exemple.

IE7 applique aussi le clear mais semble manger la marge gauche du conteneur "cd", est-ce que tu sais s'il y a une raison à cela? et pourquoi ce problème disparait en supprimant le backgroup-color? (par curiosité personnelle Smiley smile )

Je vais regarder les solutions alternatives que tu me proposes.

Merci,
Cédric
cedricme a écrit :
Ok si je comprend bien le clear ne s'applique qu'aux éléments adjacents

En fait il s'applique dans le contexte de formatage en cours.
C'est un poil technique, donc tu peux juste retenir que si tu veux que pour empêcher les flottants de dépasser de leur conteneur tu peux placer ton <div style="clear:both"></div> avant le </div> de fin du conteneur lui-même.

cedricme a écrit :
IE7 applique aussi le clear mais semble manger la marge gauche du conteneur "cd", est-ce que tu sais s'il y a une raison à cela?

Là comme ça, à part un bon vieux bug de HasLayout, je vois pas.
Sujet clos
Aller à