nicht angemeldet
span und float und width und height und Browser
Hallo,
vier spans hab ich hintereinander.
1.ohne Styleangaben (nur border zum besseren Sehen).#
2. mit float:left, Höhe 100px Breite 300px
3. nur mit Höhe und Breite je 100px
4. Höhe 200px Breite 300px.
Sieht im Firefox aus: 1. 3. 4. Nebeneinander, Breiten und Höhenangaben ignoriert. Darunter das 2. mit dem float, Höhe und Breit interpretiert.
Macht das float aus dem span ein Blockelement und interpretiert FF Höhe und Breite (W3C-konform?) nur bei Blockelementen?
Der IE interpretiert Höhe und Breite aller spans, und macht scheints die Zeilenhöhe entsrechend dem höchsten span, als stehe alle auf einer Höhe, Nr. 4 reicht bis an den Browserrand. Darunter das span mit dem Float. Warum darunter? Das float im span bewirkt also doch kein Blockelement? Denn warum floaten die sonst nicht links von dem float-span, weder FF noch IE?
Jetzt nehm ich das erste Span wech.
Dann kommt im FF linksoben das 2. span, und rechts gefloatet Nr. 3 und 4, an der Decke klebend. Jetzt doch gefloatet.
Im IE allerdings werden die Höhen ja interpretiert. Hier hängt das erste span (also Nr. 2) an der Decke, Nr. 3 steht unten (!) auf 200px Abstand, Nr. 4 oben am Browserrand. Warum flutscht Nr. 3 auf den Zeilenboden?
Mach ich jetzt für alle spans display:block kommt im FF was ganz grausliges. Das span Nr.3 hängt im span Nr. 2. also der Rahmen. Darunter span 4 (logisch, ist ja diplay:block) darin aber der text aus span nr. 3??? Warum floatet Nr. 3 nicht um das Nr.2? Und warum flutscht der Text raus?
Beim IE wie jetzt mal von mir erwartet, Nr. 2 links oben, 3. floatet daneben rechts, dann mit neuem Absazt Nr. 4.
Kann mir jemand das Prinzip erläutern oder näher bringen?
Dank Frankx.
Hier die Spans im Quelltext.
<span style="border:1px solid brown">nur span</span>
<span style="float:left; height: 100px; width: 300px; border:1px solid red;">float:left; height: 100px; width: 300px; </span>
<span style="height: 100px; width: 100px; border:1px solid green;">height: 100px; width: 100px;</span>
<span style="height:200px; width: 300px; border:1px solid blue;">height:300px; width: 300px;</span>
-
hi,
Macht das float aus dem span ein Blockelement
http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
und interpretiert FF Höhe und Breite (W3C-konform?) nur bei Blockelementen?
http://www.w3.org/TR/CSS21/visudet.html#the-width-property
http://www.w3.org/TR/CSS21/visudet.html#the-height-propertyDer IE interpretiert Höhe und Breite aller spans, und macht scheints die Zeilenhöhe entsrechend dem höchsten span, als stehe alle auf einer Höhe, Nr. 4 reicht bis an den Browserrand.
Was der IE macht, ist wenig aussagekräftig.
(ich wenn ich mir den Effekt an Hand deiner Beschreibung gerade nur so in etwa vorstellen kann.)Darunter das span mit dem Float. Warum darunter?
http://www.w3.org/TR/CSS21/visuren.html#float-position, Punkt 8.
Das float im span bewirkt also doch kein Blockelement? Denn warum floaten die sonst nicht links von dem float-span, weder FF noch IE?
Da komm ich gerade nicht ganz mit.
Jetzt nehm ich das erste Span wech.
Dann kommt im FF linksoben das 2. span, und rechts gefloatet Nr. 3 und 4, an der Decke klebend. Jetzt doch gefloatet.
Nee, 3 und 4 sind nicht gefloatet, sondern fließen um #2 herum.
Im IE allerdings werden die Höhen ja interpretiert. Hier hängt das erste span (also Nr. 2) an der Decke, Nr. 3 steht unten (!) auf 200px Abstand, Nr. 4 oben am Browserrand. Warum flutscht Nr. 3 auf den Zeilenboden?
Über IE-Fehler zu spekulieren, kommt der Kaffeesatzleserei nahe.
Mach ich jetzt für alle spans display:block kommt im FF was ganz grausliges. Das span Nr.3 hängt im span Nr. 2. also der Rahmen. Darunter span 4 (logisch, ist ja diplay:block) darin aber der text aus span nr. 3??? Warum floatet Nr. 3 nicht um das Nr.2? Und warum flutscht der Text raus?
Hier komm ich jetzt mental ohne konkrete Beispielseite gar nicht mehr mit, sorry.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga,
Dank der Mühe.
Der IE interpretiert Höhe und Breite aller spans, und macht scheints die Zeilenhöhe entsrechend dem höchsten span, als stehe alle auf einer Höhe, Nr. 4 reicht bis an den Browserrand.
Was der IE macht, ist wenig aussagekräftig.
(ich wenn ich mir den Effekt an Hand deiner Beschreibung gerade nur so in etwa vorstellen kann.)Darunter das span mit dem Float. Warum darunter?
http://www.w3.org/TR/CSS21/visuren.html#float-position, Punkt 8.
left-floating box as high as possible meint, dass kein inline-Element davor stehen darf?
Jetzt nehm ich das erste Span wech.
Dann kommt im FF linksoben das 2. span, und rechts gefloatet Nr. 3 und 4, an der Decke klebend. Jetzt doch gefloatet.
Nee, 3 und 4 sind nicht gefloatet, sondern fließen um #2 herum.
Jap, das meinte ich: span-2
Mach ich jetzt für alle spans display:block kommt im FF was ganz grausliges. Das span Nr.3 hängt im span Nr. 2. also der Rahmen. Darunter span 4 (logisch, ist ja diplay:block) darin aber der text aus span nr. 3??? Warum floatet Nr. 3 nicht um das Nr.2? Und warum flutscht der Text raus?
Hier komm ich jetzt mental ohne konkrete Beispielseite gar nicht mehr mit, sorry.
Dank Frankx
-