Det var ett tag sedan jag postade på wF känner jag nu, men jag kollar in lite titt som tätt iaf. :)
Jag satt och läste lite ur CSS 2.1 specifikationen och lite mer specifikt om float igår, min fråga är om någon skulle kunna hjälpa mig att översätta dessa regler till begriplig svenska:
Here are the precise rules that govern the behavior of floats:
The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements.
A floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.
The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
A floating box must be placed as high as possible.
A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.
Här är de exakta reglerna som styr beteendet av flöten:
Den vänstra yttre kanten av en vänsterflytande box får inte vara till vänster av den vänstra kanten av dess innehållande block. En motsvarande regel gäller för högerflytande element.
Om den nuvarande boxen är vänsterflytande, och det finns vänsterflytande boxar genererade av element tidigare i källdokumentet, då för varje sådan tidigare box, antingen den vänstra yttre kanten av den nuvarande boxen måste vara till höger av den högra yttre kanten av den tidigare boxen, eller dess topp måste vara lägre än botten av den tidigare boxen. Motsvarande regler gäller för högerflytande boxar.
Den högra yttre kanten av en vänsterflytande box får inte vara till höger av den vänstra yttre kanten av någon högerflytande box som är till höger om den. Motsvarande regler gäller för högerflytande element.
En flytande boxs yttre topp får inte vara högre än toppen av dess innehållande block. När flötet förekommer mellan två kollapsande marginaler, är flötet positionerat som om det hade en annars tom anonym block förälder som tar del i flödet. Positionen av en sådan förälder är definierad av reglerna i sektionen om marginalkollapsning.
Den yttre toppen av en flytande box får inte vara högre än den yttre toppen av något block eller flytande box genererad av element tidigare i källdokumentet.
Den yttre toppen av ett elements flytande box får inte vara högre än toppen av någon radbox som innehåller en box genererad av element tidigare i källdokumentet.
En vänsterflytande box som har en annan vänsterflytande box till vänster om sig får inte ha sin högra yttre kant till höger om dess innehållande blocks högra kant. (Löst: ett vänsterflöte får inte sticka ut på högra kanten, förutom om det redan är så långt till vänster som möjligt.) En motsvarande regel gäller för högerflytande element.
En flytande box måste vara placerad så högt som möjligt.
En vänsterflytande box måste vara så långt till vänster som möjligt, en högerflytande box måste vara så långt till höger som möjligt. En högre position föredras över en som är längre till höger/vänster.
Det kanske blev lite konstig meningsbyggnad här och var eftersom jag översatte mer eller mindre direkt... :)
Jag har gjort några test på punkterna 1-7 ovan. Jag vet inte riktigt hur man ska testa punkt 8 och 9, men jag antar resten av testen förutsätter att 8 och 9 följs.
Jag kan försöka förklara vad som menas med punkterna:
Ett flöte får inte flyta utanför dess innehållande block.
Ett vänsterflöte måste antingen komma till höger om ett tidigare flöte eller under det, och det får inte överlappa.
Ett vänsterflöte får inte överlappa ett högerflöte.
Ett flöte får inte gå utanför dess innehållande block på översidan. Vid kollapsande marginaler kan man låtsas som att flötet har en anonym blockbox som förälder.
Flöten får inte komma högre än tidigare blockboxar eller flöten.
Flöten får inte komma högre upp än tidigare element som ligger i en radbox.
Om ett flöte inte får plats bredvid ett tidigare flöte får den inte ligga bredvid det tidigare flötet, utan måste hamna längre ner.
Flytta flöten så högt upp som möjligt.
Flytta flöten så långt till vänster/höger som möjligt, men hellre så högt upp som möjligt.
Känns som om olika tolkning mellan webbläsare av hur punkterna 5, 8 och 9 skall samverka kan ha varit boven bakom problemet i den nyligen avhandlade tråden http://www.webforum.nu/showthread.php?t=144878... dvs kod liknande:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ett av Jarvklos exempel</title>
<style type="text/css">
html,body {margin:0;padding:0;height:100%}
ul, li {
list-style-type:none;
display: block;
}
ul {width: 110px; }
li {width: 50px; float: left; border: 1px solid black;}
.ett {clear: left;}
</style>
</head>
<body>
<ul>
<li class="ett">ett<br>ett</li>
<li>två</li>
<li class="ett">ett<br>ett</li>
<li>två</li>
</ul>
</body>
</html>
Om jag inte är ute och cyklar, så...
Borde inte det andra blocket med innehållet "två" i detta fall hamna i överkantslinje med det andra "ett"-blocket enligt regel 5 och 8 ?
Skillnader finns ivf mellan MSIE (som tydligen tillämpar regel 8 men inte regel 5 här) och FireFox och Opera9
Halloj, jag diskuterade problem på ICQ med icaaq och mailade faktiskt en testare på Opera som jag ändå hade mailkontakt med. Vi kom alla fram till samma sak: listan ovan ska tolkas som en priolista där de tidigare reglerna har presedens framför de senare.
Satte ihop en exempelsida: två kolumner utan wrappers . Som ni ser är det ett jättegap på vänstersidan som beror på hur floats ska tolkas enligt specifikationen.
säger att floatar ska hamna så högt som möjligt medans 5) säger att de inte får vara högre upp än alla tidigare element. 5) går före. Finurligt. En skoj detalj är att allt ser bra ut i IE, något som förstås är fel.
