Seltsamer Floatdrop in Firefox

Geldentwertung · #1 (**permalink**) 21.10.2004, 12:06

Folgender Htmlcode:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Floatdrop in Firefox</title>
		<style type="text/css">						
			#wrap{
				width:400px;
			}
			
			.left, .right{
				width:190px;
			}
			
			.left{
				float:left;
				clear:left;
				background:#F00;
			}
			
			.right{
				float:right;
				clear:right;
				background:#00F;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<h1 class="left">Float 1</h1><p class="left">S iam Upilio Ars retineo etsi lac damnatio imcomposite for oneratus sacrificum ora navigatio.</p>
			<h1 class="right">Float 2</h1><p class="right">An ergo via edico oratu for in hae, se obex has eo Veho cum Celox, edo iam cumulatius.</p>
		</div>	
	</body>
</html>

Ziel ist es, daß die links gefloateten Elemente und die rechts gefloateten Elemente oben bündig anfangen.
Einfach mal im IE6 oder Opera anschauen, da ist es so wie ich mir das vorgestellt habe und wie es auch nach allem was ich über Floats weiss sein sollte.

Im lustigen Firefox ist es aber so, daß die rechten Floats erst unter der linken Überschrift beginnen. Scheint mir ein Bug zu sein. Kennt da jemand irgendwelche workarounds, ohne dass ich das alles noch in extra divs packe und die floate?

Ach ja das erste Element muss nicht unbedingt ne Überschrift sein, p oder so was tuts auch.

Danke im voraus für jede Hilfe,

Chris

andir · #2 (**permalink**) 21.10.2004, 12:19

Es wird besser, wenn Du die <h1> hintereinander im html aufführst und dann erst die

(Scheint mir auch logisch)
Dann gehts, aber FF gibt dann noch eine Lücke - weil ich deinen Doctype geändert habe, versuch mal ne strict-Version, das Ergebnis ist ANDERS (?)

andir

Geldentwertung · #3 (**permalink**) 21.10.2004, 12:38

Erstmal Danke Andir!

Kann bei unterschiedlichen Doctypes keine Änderung erkennen. Die Lücken zwischen h1 und p gehen weg, wenn man bei beiden das margin auf 0 setzt.

Ja mit der Umstrukturierung würde es funktionieren, ist nur leider bei mir nicht möglich, da sonst bei ausgeschalteten CSS die logische Textreihenfolge nicht mehr gewahrt ist.

MfG Chris

andir · #4 (**permalink**) 21.10.2004, 13:13

Dann wirst Du um Container nicht herumkommen.
Zweimal float: left auszeichnen mit einem clear dazwischen geht wohl, aber daneben noch zweimal float right ?

Denke, dass das die inhärenten float-regeln verletzt. Soweit ich mich richtig erinnere, soll float nur dazu dienen, Elemente nebeneinander zu positionieren, eine "spaltenartige" Anordnung wie von Dir gewünscht war nicht Zweck des floats.

Das ginge nur über verschachtelte Elemente (divs, dann content usw.) wie sie ja auch täglich eingesetzt werden.

andir

toscho · #5 (**permalink**) 21.10.2004, 14:01

Stell’s um:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
   <head> 
      <title>Floatdrop in Firefox</title> 
      <style type="text/css">                   
         #wrap{ 
            width:400px; 
         } 
          
         .left, .right{ 
            width:190px; 
         } 
          
         .left{ 
            float:left; 
            clear:left; 
            background:#F00; 
         } 
          
         .right{ 
            float:right; 
            clear:right; 
            background:#00F; 
         } 
      </style> 
   </head> 
   <body> 
      <div id="wrap"> 
       <div class="left">
         <h1>Float 1</h1>
         

S iam Upilio Ars retineo etsi lac damnatio 
            imcomposite for oneratus sacrificum ora navigatio.</p> 
       </div>
       <div class="right">
         <h1>Float 2</h1>
         

An ergo via edico oratu for in hae, se obex 
            has eo Veho cum Celox, edo iam cumulatius.</p> 
       </div>
      </div>    
   </body> 
</html>

Was FireFox jetzt genau macht, weiß ich im Moment auch nicht…

Gruß
Thomas

Geldentwertung · #6 (**permalink**) 21.10.2004, 14:45

Das es mit nem extra Floatcontainer geht, ist mir auch klar. Nur leider finde ich die Möglichkeit etwas suboptimal, da ich dann pro Seite 6 sinnlose Divs hab, das ganze ist für nen Shop, wo immer 2 Artikel nebeneinander angezeigt werden sollen und 6 pro Seite.

Ich Versuch das grad so semantisch wie möglich zu schreiben, aber bin bis jetzt noch nicht auf die glorreiche Idee gekommen.
Das größte Problem ist, daß ich nie weiss wie lange die Artikelbeschreibung ist und beide Artikel nebeneinander immer so hoch sein sollen wie das höchste, weil sonst das Layout zu unruhig wird.
D.h. ich brauch pro Zeile schon nen Umfassenden Div macht dann mit der Lösung von Toscho insgesamt 9 Divs, was ich persönlich unschön finde. Hatte halt gehoft, dass man das irgendwie eleganter lösen kann.

Wobei ich immer noch der Meinung bin, daß sich Firfox buggy verhält und Opera und IE richtig liegen.

andir · #7 (**permalink**) 21.10.2004, 15:23

A float is a box that is shifted to the left or right on the current line.

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

Ah, wusste ichs doch

"Current Line" ist das was der FF richtig interpretiert /interpretieren will.
Durch deine clears erzingst du zwar beim I.E und beim Opera, dass deine KLassen sich rechts oder links spaltenartig ausrichten, aber Sinn der Sache ist das wohl nicht.

Tatsächlich machte es der FF als einziger richtig. "Current Line" ist für ihn die ZWEITE Float-box ( im HTML), deswegen stimmts im FF und nicht im IE oder Opera.

andir

Edit: *tanz* wieder was verstanden....

Geldentwertung · #8 (**permalink**) 21.10.2004, 16:39

Ich verstehs grad nicht so ganz.
Warum ist die Current Line, die, in der die Zweite Floatbox beginnt?

Müsste es nicht viel mehr die jeweilige Zeile sein, in der sich das gefloatete Element normalerweise befindet?! Das rutscht aber hoch, weil die links gefloateten Teile eben links gefloated sind und somit aus dem normalen Fluss genommen werden.

Dazu würde auch

Zitat:

Zitat von W3C

A floating box must be placed as high as possible.

passen.

Aber ich kann hier auf Arbeit grad nicht in Ruhe über diesen kryptischen W3C Kram nachdenken, vielleicht kommt mir ja daheim die Erleuchtung....

andir · #9 (**permalink**) 21.10.2004, 16:50

Code:

<div id="wrap"> 
         <h1 class="left">Float 1</h1>

Das ist nach meinem Verständnis die "current line". (element h1 >> bezogen auf das Auftauchen im HTML-Code, deswegen hat der Wechsel, den ich vorgeschlagen hatte, ja auch funktioniert!)

Code:

<p class="left">S iam Upilio Ars retineo etsi lac damnatio imcomposite for oneratus sacrificum ora navigatio.</p>

Das ist die zweite - du hast ja gecleart. HIER setzte der FF an - und das vollkommen richtig (nach meinem Denkmodell) und setzte das nachfolgende Element höhengleich an das

an.

Code:

<h1 class="right">Float 2</h1>

Mit dem folgenden clearing kommt das

element darunter:

Code:

<p class="right">An ergo via edico oratu for in hae, se obex has eo Veho cum Celox, edo iam cumulatius.</p> 
      </div>

Zitat:

Dein Zitat:

W3C hat folgendes geschrieben:
A floating box must be placed as high as possible.

heisst meiner Ansicht nach nur, dass es höchstmöglich=höhengleich mit dem im HTML vorhergehenden gefloateten Element in der "Current Line" liegen muss, nicht am höchsten Punkt des umgebenden Containers oder der Leinwand (body).

(Edit

Die Current-Line wird also durch das vorher gehende Float-Element definiert, an deren oberen Kante sich das nachfolgende Element, wenn gefloatet, ausrichten muss, wenn gecleart, an der unteren Kante.

Float funktioniert nicht absolut, sondern in Anhängigkeit der HTML-Abfolge - das war aber schon vorher klar

andir

*der immer noch von dieser tollen "entdeckung" überzeugt ist*

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Firefox - negativer z-index und generated content?	shredder01	CSS	2	10.03.2011 15:29
Synchroner XMLHttpRequest und Firefox reagiert nicht mehr	kristian	Javascript & Ajax	3	05.08.2008 17:10
seltsamer Abstand im Firefox	tesa	CSS	1	26.10.2005 04:06
Firefox 1.5 Beta 1	Pablo	Offtopic	19	13.09.2005 19:56
Bitte testen mit Firefox und IE (Vergleich!)	Spider	Site- und Layoutcheck	8	23.09.2004 23:38