[FF3] nested floats - Softwareontwikkeling

woensdag 18 juni 2008 12:15

Acties:

Topicstarter

Check dit voorbeeld:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>float test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <div style="float: left;">
    <div style="float: left; width: 20px; height: 20px; background: black;">  </div>
    <div style="float: left; width: 20px; height: 20px; background: red; "></div>
    <div>
      <div style="float: left; height: 20px; width: 20px; background: green;"></div>
      <div style="float: left; height: 20px; width: 20px; background: yellow;"></div>
      <div style="float: left; height: 20px; width: 20px; background: orange;"></div>
    </div>
  </div>
</body>
</html>

rendert in IE6, IE7 en FF2 zoals verwacht: alle 5 blokjes staan netjes op 1 lijn.

In FF3 rendert hij echter de laatste 2 blokjes naar een nieuwe regel. Ik heb geen idee waarom. De oplossing is trouwens om de <div> die de laatste 3 blokjes nest ook een float:left te geven.

Maar is dit een bug of is dit toch om de een of andere reden een juiste rendering van FF3?

woensdag 18 juni 2008 13:05

Acties:

Makkelijk

Opera & Safari doen hetzelfde, dit is gewoon de officiele manier van positioning, het is dus geen bug.
Als je de buitenste div een width van 100px geeft doet hij het wel naast elkaar.

Edit: De reden is volgens mij dat een block level element die niet gepositioneerd is floats hoort te clearen. Dat FF2 dit niet deed is ook de reden dat je clear divjes nodig had na floats in een container.

[ Voor 116% gewijzigd door Makkelijk op 18-06-2008 13:10 ]

Badieboediemxvahajwjjdkkskskskaa

woensdag 18 juni 2008 13:38

Acties:

.Johnny

Topicstarter

Ik weet niet welke opera jij gebruikt, maar als ik kijk met Opera 9.5 rendert hij niet zoals FF3, maar zoals FF2, IE6, IE7 (dus alles op 1 lijn).

Het is dus niet onwaarschijnlijk dat het wel een bug is in FF3.

edit; ik vind de uitleg over dat een block level zonder float een clear hoort te impliceren niet waarschijnlijk. Dan zouden 3 blokjes naar de nieuwe regel moeten zijn gegaan, en niet 2 van de 3.

edit2: ik denk dat de enige logische verklaring is, dat FF3 'vergeet' de breedte van de floating objects mee te nemen in de berekening van de breedte van het non-floating object. de float van de buitenste DIV zorgt ervoor dat de binnenste non-floating DIV een breedte van precies 3x20px krijgt, maar omdat de buitenste DIV een minimale breedte aanhoudt (van 3x20) passen daar maar 3 blokjes in en breken de laatste 2 uit de non-floating div dus af over de regel. zoiets.

[ Voor 85% gewijzigd door .Johnny op 18-06-2008 13:52 ]

woensdag 18 juni 2008 14:35

Acties:

.Johnny

Topicstarter

als ik dit doe:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>float test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <div style="float: left;">
    <div style="float: left; width: 20px; height: 20px; background: black;"></div>
    <div style="float: left; width: 20px; height: 20px; background: red; "></div>
    <div style="float: left; width: 20px; height: 20px; background: blue; "></div>
    <div>
      <div style="float: left; height: 20px; width: 20px; background: green;"></div>
      <div style="float: left; height: 20px; width: 20px; background: yellow;"></div>
      <div style="float: left; height: 20px; width: 20px; background: orange;"></div>
      <div style="float: left; height: 20px; width: 20px; background: purple;"></div>
    </div>
  </div>
</body>
</html>

krijg ik in FF3 inderdaad 4 op de eerste en 3 op de volgende rij. Dat lijkt mijn vorige conclusie te staven; FF3 maakt een fout bij de breedte bepaling van de buitenste div.

woensdag 18 juni 2008 14:40

Acties:

.lunatic

Wanneer ik bij de eerste div de float weghaal. Dan rendered hij hem wel goed.

woensdag 18 juni 2008 14:51

Acties:

.Johnny

Topicstarter

ja, dus?

Natuurlijk rendert hij hem dan wel goed, want dan heeft die div sowieso de volle breedte die beschikbaar is.

Het gaat om het voorbeeld, de fout kwam ik natuurlijk in een veel complexere context tegen.

woensdag 18 juni 2008 17:14

Acties:

Makkelijk

Je vorige posts kloppen, ik had niet goed gelezen. Opera en safari renderen bij mij in elk geval de laatste DRIE blokjes op een nieuwe regel. Dat is dus weer een ander scenario... Ik heb niet de meest recente versies geinstalleerd

[ Voor 12% gewijzigd door Makkelijk op 18-06-2008 17:15 ]

Badieboediemxvahajwjjdkkskskskaa

donderdag 19 juni 2008 09:52

Acties:

.Johnny

Topicstarter

heb je het nu over mijn eerste of tweede voorbeeld? in mijn 2e voorbeeld zijn in FF3 namelijk ook de 3 laatste blokjes op de volgende rij.
In Opera 9.50 dus niet. Geen idee waarom de oudere opera die jij hebt toch anders rendert.

donderdag 19 juni 2008 13:25

Acties:

Clay

cookie erbij?

Volgens mij zijn er best plausibele verklaringen voor,

ten eerste meot je je beseffen dat die geneste div die niet float WEL linksboven begint in de floatende parent, de eerste paar floats direct in de buitenste div floaten daar naar binnen. Vergelijk het met een plaatje die links een paragraaf infloat; de paragraaf begint ook nog steeds linksboven, en staat rechthoekig in de flow.

Voor de buitenste div geldt de shrink to fit width. Stel nou dat je ipv de eerder geposte fragmenten dit hebt:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>float test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <div style="float: left;">
    <div>
      <div style="float: left; height: 20px; width: 20px; background: green;"></div>
      <div style="float: left; height: 20px; width: 20px; background: yellow;"></div>
      <div style="float: left; height: 20px; width: 20px; background: orange;"></div>
    </div>
  </div>
</body>
</html>

Dan zal iedereen het logisch vinden dat die 3 divs naast elkaar komen. Die geneste div geeft dus gewoon een preferred width op voor de buitenste. Zitten er nou nog floats voor zoals in de geposte voorbeelden, dan generenen die OOK een preferred width, en die 2 zijn strijdig met elkaar.

dus; In de post van de TS is de geneste preferred width 3 blokjes, de andere 2, dus wordt de buitenste 3 breed. De eerste 2 floats duwen 2 blokjes weg, waardoor de laatste 2 naar de volgende regel gaan.

In het 2e voorbeeld idem, maar dan met genest 4 met erbuiten 3; 3 naar de volgende regel.

Wat zou er dan gebeuren als je eerst 4 floats hebt, en dan genest 3? De bovenstaande logica zou impliceren dat de preferred with 3 of 4 wordt, en blijkbaar pakken opera 9.niet5, ff3 en safari dan 4, want de eerste 4 komen op de eerste regel, en de geneste 3 op de volgende. Dit houdt ook stand als je nog meer lagen van nesting introduceert.

Het verschil zit em dus in het oplossen van de preferred width op de shrink-to-fits van de parents en childs. Sommige browsers tellen het bij elkaar op (wat mij eigenlijk fout lijkt), andere gaan uit van de breedste, en volgen dan het normale flow model mbt floats (dus wrappen).

In de spec kan ik alleen niet terugvinden wat er voorgeschreven is voor conflicterende preferred widths

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

donderdag 19 juni 2008 14:19

Acties:

Makkelijk

.Johnny schreef op donderdag 19 juni 2008 @ 09:52:
heb je het nu over mijn eerste of tweede voorbeeld? in mijn 2e voorbeeld zijn in FF3 namelijk ook de 3 laatste blokjes op de volgende rij.
In Opera 9.50 dus niet. Geen idee waarom de oudere opera die jij hebt toch anders rendert.

Ik bedoelde in je eerste voorbeeld. Ik zal Opera eens upgraden en dan nog eens kijken

Badieboediemxvahajwjjdkkskskskaa

donderdag 19 juni 2008 17:31

Acties:

.Johnny

Topicstarter

Thanks Clay, voor het toevoegen van je uitleg en de juiste terminologie. Dat ontbrak er nog aan :-)

Het blijft dan trouwens naar mijn mening toch vreemd van FF3; los van wat shrink-to-fit objecten moeten doen in conflictsituaties, is er voor het object voldoende ruimte beschikbaar om alle objecten op 1 lijn te plaatsen. Daarom is het voor mij gevoelsmatig in elk geval vreemd dat er wel gewrapt wordt.

Pagina: 1

Reageer