float probleempje in firefox - Softwareontwikkeling

vrijdag 2 juli 2004 11:42

Acties:

Verwijderd

Topicstarter

Na een hoop gelezen en gezocht te hebben, zonder succes dus, rest mij niets anders dan jullie hulp in te roepen.
Ik zal gelijk toegeven dat ik nog niet alle In-en-Out's van het 'floaten' beheers maar hier zie ik dus de logica niet van in.
In mijn voorbeeldje kan ik dus zonder problemen block-1 en block-2, dmv een Class, later verhuizen naar de rechterkant van het scherm.
block-3 en block-4, die gebruik maken van dezelfde Class, laten in FireFox een ruimte aan de bovenkant over?
Als block-1 of block-2 al aan de rechterkant staan gaat het wel goed en sluiten block-3 of block-4 netjes aan.

In IE 6 en Opera 7 gaat het wel goed, in firefox dus niet.
Wie heeft een idee of kan mij de juiste weg wijzen?

Voorbeeld Linkje

code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>default</title>
<style>
html, body, #Container { 
    min-height: 100%; width: 100%; height: 100%; 
}

html>body, html>body #Container { 
    height: auto; 
}

body { 
    font-family: verdana; font-size: 12px; margin: 0; padding: 0;
}


#Container {
    position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0;
}

#Header {
    height: 140px; background-color: lime; padding: 0; margin: 0;
}

#Footer {
    clear: both; width: 100%; height: 24px; position: absolute; bottom: 0; left: 0; padding: 0; margin: 0; background-color: lime;
}

#Content {
    padding-bottom: 24px; padding: 0; margin: 0;
}

.LeftBlock {
    clear: left; float: left; width: 180px;
}

.RightBlock {
    clear: right; float: right; width: 180px;
}
</style>
</head>

<body>
<div id="Container">
    <div id="Header">Header</div>
        <div id="Content">
            <!--  -->
            <div class="LeftBlock">
                <strong>Block-1</strong>
            </div>
            <!--  -->
            <div class="LeftBlock">
                <strong>Block-2</strong>
            </div>
            <!--  -->
            <div class="LeftBlock">
                <strong>Block-3</strong>
            </div>
            <!--  -->
            <div class="LeftBlock">
                <strong>Block-4</strong>
            </div>
            <!--  -->
            <p style="margin: 0 180px;">Content</p>
        </div>
    <div id="Footer">&nbsp;</div>
</div>
</body>
</html>

vrijdag 2 juli 2004 12:15

Acties:

Spruit_elf

Intentionally left blank

Ik zie het probleem niet echt, bij mij sluit alles goed aan, zowel met class leftblock als right block

ik moet eerlijk zeggen dat ik de vraag ook niet helemaal begrijp, haal je links en rechts meschien door elkaar?

waarom heb je trouwens zoveel comments in je code staan?
en ligt het aan mij of zijn de css regels voor
html, body, #Container {}
html>body, html>body #Container {}
#Container {}
overbodig..

Those who danced were thought to be quite insane by those who could not hear the music.

vrijdag 2 juli 2004 12:41

Acties:

Clay

cookie erbij?

Je moet die eerste 2 LeftBlocks ff op RightBlock zetten, dan zie je het probleem in firefox.

edit:
* hmz, bug in ff ?

Iets wat float doet dat in eerste instantie vanuit zijn flow positie in een line, voor de eerste box in je voorbeeld is dat dus linksbovenin. Als ze allemaal naar links staan met een clear left komen ze uiteraard netjes onder elkaar. effectief doet het niets (vergeleken met normale block level elementen in de flow), behalve het mogelijk maken dat er ook iets naast kan gaan staan.

Wat Firefox nu lijkt te doen is het volgende; Box1 float naar right en zit niet meer de flow in de weg, dus een enkele volgende box erna die op left zou staan zou bovenin op dezelfde hoogte moeten beginnen.
Er staat alleen eentje na die op right staat, met een clear , en normaal gesproken (zonder floats) herstelt dit de flow, en zouden volgende elementen er onder moeten komen. Het 3e element die op links staat zou dan onder het element dat de clear heeft gedaan beginnen; onder de tweede op right.

Maar die floaten dus ook allemaal

Het 3e element begint nu onder het 1e element (in ff), zo te zien omdat de clear van de 2e de flow achter de 1e herstelt. Maar omdat die zelf ook float genereert die geen hoogte. Je kan dit testen door de eerste box een height te geven (van b.v. 50px). dan gaat de 3e dus ook 50px omlaag.

Nou is alleen de vraag:
Mag iets wat een clear heeft maar zelf ook float de flow wel herstellen, en daarmee andere floaters in de weg zitten door de line omlaag te plaatsen?

Ik denk het eigenlijk niet... en dan zou dit een terechte bug zijn in Firefox.

[ Voor 87% gewijzigd door Clay op 02-07-2004 12:57 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

vrijdag 2 juli 2004 12:45

Acties:

Verwijderd

Klopt het nu of zie ik niks verkeerd met firefox

vrijdag 2 juli 2004 12:59

Acties:

NomoDigger

Heb ook eens iets dergelijks gehad, heb dit toen als volgt opgelost:

Cascading Stylesheet:

.Left {
    clear: left; float: left; width: 180px;
}
.Right {
    clear: right; float: right; width: 180px;
}
.Block {
 /* hier code voor opmaak van je blocks */
}

HTML:

<body>
<div id="Container">
    <div id="Header">Header</div>
        <div id="Content">
            <!--  -->
            <div class="Right">
                <div class="Block">
                    <strong>Block-1</strong>
                </div>
                <!--  -->
                <div class="Block">
                    <strong>Block-2</strong>
                </div>
                <!--  -->
            </div>
            <div class="Left">
                <div class="Block">
                <strong>Block-3</strong>
                </div>
                <!--  -->
                <div class="Block">
                    <strong>Block-4</strong>
                </div>
                <!--  -->
            </div>
            <p style="margin: 0 180px;">Content</p>
        </div>
    <div id="Footer">&nbsp;</div>
</div>
</body>

Dus met 2 kolommen met blocks erin.

vrijdag 2 juli 2004 13:23

Acties:

Spruit_elf

Intentionally left blank

hmm dat probleem had ik ook, het werkt wel goed als je om en om doet, dus left right left right, dat is makelijker dan de oplossing van nomodigger

code:

<html>
<head>
<title>default</title>
<style>
.LeftBlock {clear: left; float: left; width: 180px;}
.RightBlock { clear: right; float: right; width: 180px;}
/*voor duidelijkheid*/
body * {border: 1px red solid;}
</style>
</head>
<body>
    <div class="LeftBlock">Block-1
    </div>
    <div class="RightBlock">Block-2
    </div>
    <div class="LeftBlock">Block-3
    </div>
    <div class="RightBlock">Block-4
    </div>
</body>
</html>

zo dus

dit probleem doet zig altijd voor als je 4 floats heb waarvan de eerste 2 naar één kant gaan en de andere naar de andere kant.

ik denk dat het komt omdat als je 2 dezelfde floats hebt, waarvan er 1 aan de ene kant en 1 aan de andere kant, dan horen ze normaal gewoon op de zelfde hoogte te zitten, dat doet ff ook goed, op het moment dat er 2 floats aan bijde kanten zitten dan gaat de eerste rechtste float (ervanuitgaand dat het left left right right is) wel keurig op de gelijke hoogte zitten met de vorige float links maar hij vergeweet dat ie er nog 1 omhoog mag omdat er nog een linker float zit, of dat default behavior is of dat hjet een bug in ff is weet ik niet, maar om en om doen helpt wel.

EDIT:
als je het met 6 blokken doet , left left left right right right, dan zit de eerste right ook weer op de zelfde hoogte als de laatste left, maar hij schuift nie tverder omhoog

code:

<html>
<head>
<title>default</title>
<style>
.LeftBlock {clear: left; float: left; width: 180px;}
.RightBlock { clear: right; float: right; width: 180px;}
/*voor duidelijkheid*/
body * {border: 1px red solid;}
</style>
</head>
<body>
    <div class="LeftBlock">Block-1
    </div>
    <div class="LeftBlock">Block-2
    </div>
    <div class="LeftBlock">Block-3
    </div>
    <div class="RightBlock">Block-4
    </div>
    <div class="RightBlock">Block-5
    </div>
    <div class="RightBlock">Block-6
    </div>
</body>
</html>

De rest van de code is niet nodig om het probleem te zien

EDIT2:
volgens mij is het correct wat ff doet, want het zijn block boxen en als de eerste right box de laatste leftbox ziet dan mag hij daar nog naast zitten , maar hij mag niet nog 1 omhoog omdat left1 en 2 blockboxen zijn en floaten, en hem dus tegen houden, de normal volgorde geld dan dus gewoon voor deze boxen en dus moet je voor het geweenste resultaat , ze om en om doen

ik lul hier meschien ui tme nek, heb een beetje moeite om het te verwoorden, maar het komt er volgens mij op neer dat IE het weer eens fout doet

EDIT3:
kijk ook naar de behavior als je je browser zo smal maakt dat ze niet meer naast elkaar passen, IE vs FF, volgens mij doet FF het daar prima en IE fout

EDIT4:
http://www.w3.org/TR/CSS21/visuren.html#floats leesmateriaal

[ Voor 215% gewijzigd door Spruit_elf op 02-07-2004 14:03 ]

Those who danced were thought to be quite insane by those who could not hear the music.

vrijdag 2 juli 2004 14:03

Acties:

Verwijderd

wat clear doet is definieren of een object naast een floatend element mag zitten, als dat zo is wordt het element met die clear net zo lang naar onder verplaatst tot ie niet meer naast de float zit. Het maakt verder niet uit of het element zelf float of niet en door een clear wordt er helemaal niks in de flow hersteld.

Elementen die floaten worden uit de flow gehaald en dat blijft zo. Ook als er ergens anders elementen met een clear staan

vrijdag 2 juli 2004 15:14

Acties:

Clay

cookie erbij?

De clear property definieert idd of die naast iets floatends mag zitten, maar alleen voor zichzelf. Andere elementen worden alleen daardoor beinvloedt zoals dat element het normaal ook zou doen. Een <p></p> met clear zou dus een block genereren, en alles daarna (in de markup) zou daar logischerwijs onder komen (vandaar mijn "herstelt de flow" woordkeuze).
Maar dat ding met float right (die dus niet in de flow zit) cleart dus nu ook voor de float die helemaal aan de andere kant van het scherm staat, en er is wel degelijk ruimte om daarnaast te floaten (ook al doet ff het niet)... Dus als het zoals jij zegt helemaal niets in de flow herstelt, zouden die floats links ook gewoon tegen de bovenrand moeten staan, en doet ff het hier fout.

Opera doet het nml ook zoals IE het doet. Nou kan je niet van IE uitgaan als het op CSS weergave aankomt, maar Opera is andere koek.

edit:
zie die w3 link

De specs zeggen er zowaar wat over;

When the property is set on floating elements, it results in a modification of the rules for positioning the float. An extra constraint (#10) is added:

• The top outer edge of the float must be below the bottom outer edge of all earlier left-floating boxes (in the case of 'clear: left'), or all earlier right-floating boxes (in the case of 'clear: right'), or both ('clear: both').

ze horen dus geen invloed op elkaar te hebben. En de paragraaf in het voorbeeld van de TS begint wel bovenaan (en staat in dezelfde parent), daar hebben de clears dus geen invloed op

maar wel op elkaar. Lijkt me dus echt duidelijk een FF bug.

[ Voor 34% gewijzigd door Clay op 02-07-2004 15:45 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

maandag 5 juli 2004 16:47

Acties:

Verwijderd

Is dit een bekende bug, eentje die te vinden is in bugzilla?