[CSS] 3 columns, verkeerde clear (in IE)*

[F97]

Ik heb drie divs in een container div, een background-image in de container div om rounded corners te creeren onderaan, en om de drie divs te clearen gebruik ik een linebreak onder de laatste div.



De container div stopt onder de rechterdiv in IE, dit heb ik getest door de content van de midden- en rechterdiv langer te maken.

Iemand een idee hoe ik dit kan fixen? Of welke bug dat is? :-)

HTML:

<div id="content">
   <div id="navSecondary" />
   <div id="childContent" />
   <div id="contentSecondary"  />
   <br class="clear" />
</div>

In mijn css heb ik dit:

Cascading Stylesheet:

#navSecondary {
    width: 150px;
    float: left;
    }

#childContent {
    margin-left: 20px;
    width: 380px;
    float: left;
    }

#content {
    clear: both;
    padding: 0 20px 15px 20px;
    background: url(../img/decoration/containerBottom.gif) no-repeat bottom left;
    }

#contentSecondary {
    margin-left: 570px;
    }

.clear { clear: both; }

[edit]Tegenwoordig bestaan er ook [plain]

HTML:

en

Cascading Stylesheet:

[/] highlighters beschikbaar ;)[/]

[ Voor 44% gewijzigd door BtM909 op 16-05-2006 12:21 ]

[F97]

Aah. Opgelost.

Cascading Stylesheet:

/* \*/
* html #content { height: 1%; }
/* */

(Dankzij een opmerking van crisp.)

[JHS]

Je gebruikt nu overigens hacks, terwijl je dat beter op kan lossen met een via conditional comment geïnclude CSS bestand . Overigens zijn er ook andere en in mijn ogen betere manier om je floats te clearen dan met een clearing br, zoals overflow: auto; op de container.

[F97]

JHS schreef op dinsdag 16 mei 2006 @ 12:45:
Je gebruikt nu overigens hacks, terwijl je dat beter op kan lossen met een via conditional comment geïnclude CSS bestand . Overigens zijn er ook andere en in mijn ogen betere manier om je floats te clearen dan met een clearing br, zoals overflow: auto; op de container.

Aha. Die overflow: auto met die _height is inderdaad netter. Geen br meer nodig. Joepie! Bedankt.

[JHS]

Die height hoort natuurlijk ook in een conditional comment thuis .

[F97]

JHS schreef op dinsdag 16 mei 2006 @ 12:56:
Die height hoort natuurlijk ook in een conditional comment thuis .

God ja, ik wou het eigenlijk nog vragen omdat het me er even dirty uitzag

Zo dan?

HTML:

<!--[if lte IE 6]>
<link rel="stylesheet" href="iefix.css" type="text/css" />
<![endif]-->

Met in die specifieke css-file

Cascading Stylesheet:

#content {
   _height: 1%; 
   }

En in de gewone css-file enkel die overflow:auto bij #content? Juist?

[JHS]

In dat iefix.css bestand kan je die underscore natuurlijk weglaten . Verder klopt het volgens mij .

[F97]

Hm. Ik zal het toch op de oorspronkelijke dirty manier doen. In de css-file, met de hack. Maar! Met de overflow: auto. Dan kan er niet mee gefiddlet worden door anderen. Het is misschien niet zo net, en minder future-proof, maar liever dat dan opeens een site die uiteenvalt omdat iemand de file gedeletet heeft of het pad naar de IE Fix css-file verkeerd is etc. (Zie mij mijn acties verantwoorden Tss.)

Anyway. De manier die jij aanbrengt hou ik wel in het achterhoofd voor andere gevallen

[BtM909]

Je kan toch ook gewoon inline CSS in je conditional comment stoppen

[Verwijderd]

Dat met die overflow:auto ...
Wordt leuk als je vervolgens in Safari gaat kijken op de Mac ... kreeg vorige keer dan weer schuifbalken in die div.

[F97]

BtM909 schreef op dinsdag 16 mei 2006 @ 13:17:
Je kan toch ook gewoon inline CSS in je conditional comment stoppen

Ja, maar da's wel heel vies dan. Op iedere pagina inline CSS code Dan doe ik liever dirty achter de schermen. Bovendien laat de situatie (...) het niet toe dat te doen. You know, het moet naar de klant en die wil er dan templates van maken voor zijn CMS ... En ik ben er niet gerust in


SpartaRotterdam: je hebt gelijk. Scrollbars in Safari. En het ziet er behoorlijk fucked uit. De #content container is maar iets van 300px breed. De #contentSecondary staat helemaal rechts in de #content container, dus ik moet volledig naar rechts scrollen om die te zien. En hij ziet er ook messed up uit. To say the least.

[ Voor 43% gewijzigd door F97 op 16-05-2006 16:37 . Reden: Foto toegevoegd ]