[CSS] IE vs. Firefox weergave geneste DIVs

[Verwijderd]

Hoi,

Ik heb een container DIV met daarin twee andere DIVs. Het probleem is dat in Firefox die container DIV niet als container werkt. Om een en ander duidelijk te maken heb ik een voorbeeldje online gezet.

Open je het voorbeeld in IE dan zie je links een rode DIV (menu) en rechts een groene DIV (hoofdtekst). Onder de groene DIV zie je een stuk blauw. Dit is het deel van de container DIV dat zichtbaar is. Dit is zoals ik het ook in Firefox wil hebben.

Bekijk je het voorbeeld in Firefox dan zie je die container DIV, althans, zijn paarse omlijning, bovenaan hangen. Hij werkt dus niet als container.

Wat doe ik verkeerd? Hoe komt het dat die rode en groene DIV niet binnen de container div komen in Firefox?

De CSS:

code:

.container
{
    background-color:blue;
    border:3px solid purple;
    width:780px;
    margin:0px;
    padding:0px;
}

.menu 
{
    background-color:red;
    float:left;
    width:180px;
    margin:0px;
    padding:0px;    
}

.maincontent
{
    background-color:green;
    float:left;
    width:600px;
    margin:0px;
    padding:0px;
}

[crisp]

clear je floats door een element met clear:both onder je floats te zetten of door je container overflow: auto of hidden te geven. IE's behaviour is hier fout, floats zijn immers uit de flow gehaald en zijn als zodanig geen content meer van je container.

wordt tijd om dit eens in een FAQ te stoppen...

[ Voor 36% gewijzigd door crisp op 01-03-2006 00:04 ]

[Verwijderd]

Ik had in iedergeval je divjes een position mee gegegeven. (relative)

Jouw probleem: FF wil dat je een height mee geeft. Die heb jij niet aan gegegeven bij je container

[Verwijderd]

Hulde aan de meester!

Het werkt, maar waarom? Omdat floats uit 'de flow' gehaald zijn zeg je. Wil dat zeggen dat als je een float attribuut gebruikt dat die dingen uit hun container getild worden en er overheen gelegd worden door de (correct werkende) browser?

Toch gek

The float property sets where an image or a text will appear in another element.

Je zou met bovenstaande beschrijving verwachten dat 'in another element' betekent dat die twee divs in hun container weergegeven worden.

@PieterJan: Een height opgeven wil ik niet, omdat de hoogte mee moet groeien met de content. Postion:relative zetten helpt ook niet.

Ik heb het overigens nu met overflow:auto opgelost. Ben door de tables die ik eerst gebruikte niet echt gewend dat je dit expliciet moet opgeven.

[ Voor 57% gewijzigd door Verwijderd op 01-03-2006 00:24 ]

[crisp]

Verwijderd schreef op woensdag 01 maart 2006 @ 00:06:
Hulde aan de meester!

Het werkt, maar waarom? Omdat floats uit 'de flow' gehaald zijn zeg je. Wil dat zeggen dat als je een float attribuut gebruikt dat die dingen uit hun container getild worden en er overheen gelegd worden door de (correct werkende) browser?

In feite wel, hoewel floats als eigenschap hebben dat ze wel effect hebben op inline boxes (die vloeien eromheen).

Er zijn in feite 4 soorten van positioning:
1) normal flow
2) relative positioning
3) floats
4) absolute positioning

floats en absolute positioned elements hebben geen invloed op de flow van andere blocklevel boxes. Voor floats is er een uitzondering als de overflow property een andere waarde dan 'visible' heeft.

Het float-model is in IE6 (en lager) badly broken en ook in IE7 beta 2 is het nog steeds niet helemaal gefixed (de containing box wordt niet langer automatisch meer uitgerekt, maar overflow op auto of hidden zetten heeft ook geen effect).

[ Voor 13% gewijzigd door crisp op 01-03-2006 00:26 ]

[T-MOB]

Verwijderd schreef op woensdag 01 maart 2006 @ 00:06:
Hulde aan de meester!

Het werkt, maar waarom? Omdat floats uit 'de flow' gehaald zijn zeg je. Wil dat zeggen dat als je een float attribuut gebruikt dat die dingen uit hun container getild worden en er overheen gelegd worden door de (correct werkende) browser?

Hoe je het precies wil omschrijven is een beetje lastig. Het "uit de flow" zijn wil in deze context zeggen dat het element in verticale richting geen deel uitmaakt van zijn parent. Dit gedrag is het best te bergijpen aan de hand van hoe je een afbeelding zou willen plaatsen in een stuk text met pargrafen.
Stel dat je plaatje hoger is dan de paragraaf waar hij in afgebeeld wordt. De paragraaf zou worden opgerekt waardoor de volgende paragraaf pas onder het plaatje zou beginnen:

plaatje rechts uitgelijnd:
---------------------
paragraph met *******
tekst en een  *image*
plaatje.      *image*
              *image*
	      *image*
	      *******
Volgende paragraph na
de paragraph met
plaatje
---------------------

In de meeste gevallen zou je echter willen dat de volgende paragraaf gelijk onder de tekst begint, waarbij de tekst zich ook netjes om het plaatje afbreekt. Dit is het gedrag wat een float implementeert.

plaatje rechts gefloat:
---------------------
paragraph met *******
tekst en een  *image*
plaatje.      *image*
              *image*
Volgende      *image*
paragraph na  *******
de paragraph met
plaatje
---------------------

Om dit te bewerkstelligen moet de hoogte van de pargraaf dus niet beinvloedt worden door de hoogte van het plaatje. En in die zin wordt een gefloat element dus ook uit "de flow" (de normale ordening van elementen in een webpagina) gehaald.

[Verwijderd]

@Crisp:
Ok, dan ga ik morgen die IE7 beta 2 eens op mijn rommelpc zetten om te kijken hoe het er daar uitziet, want als ik je goed begrijp is de overflow:auto methode dus ook niet waterdicht. Bedankt.

/ Ik zou dan voor die clear:both methode gaan, maar dan moet ik puur voor die clear:both een extra element invoegen. Dat vind ik eigenlijk ook een beetje jammer.

@T-MOB: is duidelijk. bedankt.

[ Voor 38% gewijzigd door Verwijderd op 01-03-2006 00:38 ]

[crisp]

Verwijderd schreef op woensdag 01 maart 2006 @ 00:32:
@Crisp:
Ok, dan ga ik morgen die IE7 beta 2 eens op mijn rommelpc zetten om te kijken hoe het er daar uitziet, want als ik je goed begrijp is de overflow:auto methode dus ook niet waterdicht. Bedankt.

/ Ik zou dan voor die clear:both methode gaan, maar dan moet ik puur voor die clear:both een extra element invoegen. Dat vind ik eigenlijk ook een beetje jammer.

@T-MOB: is duidelijk. bedankt.

Het is natuurlijk niet gezegd dat het in de final van IE7 ook nog fout zal zijn; m.i. heeft Micorosoft toch wel de verplichting om als ze bepaalde aspecten van hun CSS implementatie fixen ze daarmee ook de bijbehorende aspecten fixen cq implementeren

[CaptBiele]

crisp schreef op woensdag 01 maart 2006 @ 00:45:
Het is natuurlijk niet gezegd dat het in de final van IE7 ook nog fout zal zijn; m.i. heeft Micorosoft toch wel de verplichting om als ze bepaalde aspecten van hun CSS implementatie fixen ze daarmee ook de bijbehorende aspecten fixen cq implementeren

tja, daar hebben ze weinig boodschap aan. Ik heb er weinig vertrouwen in...