nicht angemeldet
Firefox hebt ein float zu viel auf
Hallöchen ihr,
ich stehe mal wieder auf dem Schlauch. Die Reihenfolge ist:
<div></div>
<div></div>
<div>mit float:left</div>
<div>Mit dem Inhalt der Seite.</div>
Das wird alles auch korrekt dargesellt. Nun habe ich im Inhalsbereich aber mehrere Bilder untereinander, die jeweils mittels float:left nebendran noch einen kurzen Text stehen haben. Damit immer ein Bild unter dem nächsten steht, muss ich das float für das nächste Bild ja wieder aufheben. Nun hebt Firefox aber auch zusätzlich noch das float der dritten Ebene auf. (IE macht es so wie ich es will.)
Ich vermute, dass das mit dem Elternelement zu tun hat. Aber wieso funktioniert es dann nicht, wenn ich alle Bilder gemeinsam auf eine Ebene lege oder jedem einzeln ein div zuordne?
Die einzelnen Bilder sind so angegeben:
<p><a><img mit float:left></a>Text<a>E-Mail</a></p>
<p mit clear:left><a><img mit float:left></a>Text<a>E-Mail</a></p>
Die Lösung ist bestimmt wieder total trivial...
Gruß,
Conny
-
Hi,
Die Lösung ist bestimmt wieder total trivial...
nein, das ist sie eigentlich nicht. Schau Dir mal http://www.1ngo.de/web/clear.html an - dann siehst Du, daß Firefox auf dem Wege ist, die Spezifikation 100%ig korrekt umzusetzen, auch wenn dies nicht unbedingt dem Wunsch der Seitenautoren entspricht.
freundliche Grüße
Ingo-
Hi Ingo,
Schau Dir mal http://www.1ngo.de/web/clear.html an - dann siehst Du, daß Firefox auf dem Wege ist, die Spezifikation 100%ig korrekt umzusetzen,
Bäh. :-(
auch wenn dies nicht unbedingt dem Wunsch der Seitenautoren entspricht.
Wird denn auch eine Möglichkeit angedacht, die dann dem Wunsch der Seitenautoren entspricht?
Ich meine, es ist ja nicht gerade eine ungwöhnliche Sache, etwas auf diese Art und Weise zu gestalten, und wenn es mit clear offentichtlich nicht funktioniert, ist der Schritt zurück zu Tabellen ja eigentlich nicht weit.
Hast du denn einen Tipp, wie ich meinen "Wunsch" vernünftig umsetzen kann?
Gruß,
Conny-
ist der Schritt zurück zu Tabellen ja eigentlich nicht weit.
Keiner, der was auf seine Websites gibt, missbraucht Tabellen zu Layoutzwecken, nur weil irgendwas nicht so funktioniert, wie er denkt oder möchte. Lieber wandelt man sein Layout etwas ab oder verwendet Hacks.
-
Hi,
Ich meine, es ist ja nicht gerade eine ungwöhnliche Sache, etwas auf diese Art und Weise zu gestalten, und wenn es mit clear offentichtlich nicht funktioniert, ist der Schritt zurück zu Tabellen ja eigentlich nicht weit.
Da hast Du völlig recht. Nur leider sieht die Spezifikation so etwas nicht vor. Auch in CSS 3 kann ich nichts anderes finden: http://www.w3.org/TR/CSS2/visuren.html#q28.
Hast du denn einen Tipp, wie ich meinen "Wunsch" vernünftig umsetzen kann?
Da diese Frage wohl häufiger gestellt wird, werde ich das wohl mal zum Ablaß nehmen und meine Seite erweitern. Vorab: Du hast drei Möglichkeiten (sofern im konkreten Fall möglich und sinnvoll):
1. absolute Positionierung,
2. Wie im dritten Beispiel den Inhaltsbereich auch floaten lassen und hoffen, daß dies noch länger von allen Browsern falsch umgesetzt wird,
3. Verzicht auf clear durch ausreichend viel Inhalt.freundliche Grüße
Ingo-
Hallo Ingo,
Da hast Du völlig recht. Nur leider sieht die Spezifikation so etwas nicht vor. Auch in CSS 3 kann ich nichts anderes finden: http://www.w3.org/TR/CSS2/visuren.html#q28.
*seufz*
Da diese Frage wohl häufiger gestellt wird, werde ich das wohl mal zum Ablaß nehmen und meine Seite erweitern.
Ja, mach das mal. Ich hatte mich sowieso gewundert, dass es nicht hintendran hing. Du erklärst den Teil sehr schön, finde ich (Lob muss zwischendrin ja auch mal sein :-)), nur werden die meisten Leute, die darauf stoßen, sicherlich auch wissen wollen, was man denn statt dessen machen kann.
- absolute Positionierung,
Wäre unter Umständen eine Alternative. Wenngleich ich da pixelgenaue Probleme erwarte: oben wurde ein Bild eingefügt, an das direkt das Menü (links) anschließen muss. (Es sind oben "befestigte" Ringe, an denen das Menü hängt.)
- Wie im dritten Beispiel den Inhaltsbereich auch floaten lassen und hoffen, daß dies noch länger von allen Browsern falsch umgesetzt wird,
Das wird mir zu unübersichtlich.
- Verzicht auf clear durch ausreichend viel Inhalt.
Du meinst den Text, der neben den Bildern steht? Das geht leider nicht bzw. ginge nur durch unschöne <br> weil als Text nur ein Name, Titel, Telefonnummer und E-Mailadresse notwendig ist.
Ich werde es wohl mal mit absoluter Positionierung versuchen, vielleicht sind meine Befürchtungen ja unberechtigt.
Danke für deine Hilfe,
Conny-
Ist Dein Problem eigentlich das selbe, was ich auf http://www.volkers-fahrschulen.de/ hatte und mit dem <div id="floatBugHack"> habe beheben können?
-
Ist Dein Problem eigentlich das selbe, was ich auf http://www.volkers-fahrschulen.de/ hatte und mit dem <div id="floatBugHack"> habe beheben können?
Wenn du mir verrätst, was dein Problem war, kann ich dir die Frage vielleicht beantworten.
-
Ist Dein Problem eigentlich das selbe, was ich auf http://www.volkers-fahrschulen.de/ hatte und mit dem <div id="floatBugHack"> habe beheben können?
Wenn du mir verrätst, was dein Problem war, kann ich dir die Frage vielleicht beantworten.
Dass mit einem clear nicht nur ein float aufgehoben wurde, sondern alle auf der Seite, und damit der Inhalt zwischen den beiden Menülisten ganz nach unten auf die Seite gerutscht ist.
Aber ich dachte, Du hättest eine Frage? :-)
-
-
-
Hallo Ingo,
- absolute Positionierung,
- Wie im dritten Beispiel den Inhaltsbereich auch floaten lassen und hoffen, daß dies noch länger von allen Browsern falsch umgesetzt wird,
Gemäß CSS 2.1 ist das vollkommen richtig (siehe Link unten).
- Verzicht auf clear durch ausreichend viel Inhalt.
4. overflow ungleich visible für das Container-Element.
Oder ganz allgemein ausgedrückt (das schließt Punkt 1. und 2. mit ein): Das Container-Element muß seinen eigenen "Block formatting context" aufspannen: "The 'clear' property does not consider floats inside the element itself or in other block formatting contexts." (aus: http://www.w3.org/TR/CSS21/visuren.html#flow-control)
Viele Grüße
Carsten-
Hi,
Gemäß CSS 2.1 ist das vollkommen richtig (siehe Link unten).
"The 'clear' property does not consider floats inside the element itself or [...]." (aus: http://www.w3.org/TR/CSS21/visuren.html#flow-control)
Ich verstehe das aber so, daß dies lediglich die Eigenschaft clear für das Element betrifft, d.h. daß in einem Element mit clear:left sich dieses nicht auf hierin enthaltene Elemente mit float:left auswirkt, was ja auch logisch ist und eigentlich nicht erwähnt werden müßte.
Wenn dies anders wäre, welchen relevanten Unterschied würdest Du dann auf meiner Seite im zweiten (Box ohne float) und dritten (Box mit float) Beispiel sehen? Oder anders gesagt: wo steht denn, daß sich clear in gefloateten Elementen anders auswirken soll als in nicht gefloateten?
freundliche Grüße
Ingo-
Hallo Ingo,
Gemäß CSS 2.1 ist das vollkommen richtig (siehe Link unten).
"The 'clear' property does not consider floats inside the element itself or [...]." (aus: http://www.w3.org/TR/CSS21/visuren.html#flow-control)
Ich verstehe das aber so, daß dies lediglich die Eigenschaft clear für das Element betrifft
Ja, das war auch schon mit CSS 2 so, aber den entscheidenden Satz hast Du in dem Zitat weggelassen... ;-)
Also nochmal: folgendes ist für das vorliegende Problem relevant:
"The 'clear' property does not consider floats [...] in other block formatting contexts."
Was ist ein "Block formatting context"? Der ursprüngliche "Block formatting context" ist der Viewport. Aber ein absolut positioniertes Element, ein gefloatetes Element oder ein Element mit zum Beispiel overflow:auto (und ein paar andere) spannen einen neuen "Block formatting context" auf. Oder wie ich es gerne nenne: sie bilden ihren eigenen "Mikrokosmos". Alle clears innerhalb dieses Mikrokosmos beziehen sich nur noch auf floats innerhalb dieses Mikrokosmos. Alle floats außerhalb dieses Mikrokosmos -- oder in den Worten der Spezifikation: "in other block formatting contexts" -- bleiben von diesen clears unberührt.
Wenn dies anders wäre, welchen relevanten Unterschied würdest Du dann auf meiner Seite im zweiten (Box ohne float) und dritten (Box mit float) Beispiel sehen? Oder anders gesagt: wo steht denn, daß sich clear in gefloateten Elementen anders auswirken soll als in nicht gefloateten?
s. o.
Allgemein noch zu Deinen Beispielen:
IE und float ist ja sowieso eine Geschichte für sich, deswegen werden Beispiel 1 und 3 richtig angezeigt, Beispiel 2 falsch (width für ein floatendes Element sorgt für viele IE-Float-Bugs).
Mozilla hat irgendwo zwischen 1.7.3 und 1.7.5 auf die CSS-2.1-konforme Darstellung umgeschaltet. Deswegen wird Beispiel 1 in Firefox 1.0 (--> mindestens Mozilla 1.7.5) und älteren Mozillas bzw. Netscape 7 unterschiedlich angezeigt (Firefox und neuere Mozillas richtig, ältere Mozillas/Netscape 7 falsch).
Beispiel 3 wird entgegen Deinem Satz "Im folgenden Beispiel hält sich kein mir bekannter Browser an die korrekte Definition" in allen von mir getesteten Browsern CSS-2.1-konform angezeigt.
Viele Grüße
Carsten-
Nochmal Hallo,
Allgemein noch zu Deinen Beispielen:
Ich vergaß noch:
Beispiel 2 verhält in den Geckos parallel zu Beispiel 1.
Beispiele 1-3 werden in Opera richtig angezeigt.
Viele Grüße
Carsten -
Was ist ein "Block formatting context"? [...]
Danke, das hab ich noch gebraucht in Ergänzung zu Deiner Antwort auf mein Posting zum selben Thema im "Rampenlicht" ;-)
Jetzt hab ichs glaub ich auch verstanden. -
Hi,
"The 'clear' property does not consider floats [...] in other block formatting contexts."
Was ist ein "Block formatting context"? Der ursprüngliche "Block formatting context" ist der Viewport. Aber ein absolut positioniertes Element, ein gefloatetes Element oder ein Element mit zum Beispiel overflow:auto (und ein paar andere) spannen einen neuen "Block formatting context" auf. Oder wie ich es gerne nenne: sie bilden ihren eigenen "Mikrokosmos". Alle clears innerhalb dieses Mikrokosmos beziehen sich nur noch auf floats innerhalb dieses Mikrokosmos. Alle floats außerhalb dieses Mikrokosmos -- oder in den Worten der Spezifikation: "in other block formatting contexts" -- bleiben von diesen clears unberührt.
danke, das scheint tatsächlich so richtig zu sein. Dann werde ich meine Seite mal korrigieren - erweitern wollte ich sie ja ohnehin schon und aktualisieren muß ich sie auch, da schon erwähnt werden sollte, daß Opera 8 sich im letzten Beispiel nicht mehr am IE orientiert.
freundliche Grüße
Ingo-
Hi,
Nachtrag:
"The 'clear' property does not consider floats [...] in other block formatting contexts."
beim Überarbeiten meiner Seite sehe ich gerade, daß dieser Passus in CSS 2.0 noch gar nicht enthalten war.
Ergo ist meine damalige Warnung zum dritten Beispiel "Obwohl die Darstellung in allen Browsern gleich ist und das linksfloatende div beim 'clear' unberücksichtigt bleibt, sollte man sich nicht auf diese fehlerhafte Interpretation verlassen" jetzt deshalb hinfällig, weil das W3C die Spezifikation in diesem Punkt dem durchgängig gleichem Browserverhalten angepaßt hat. - Jetzt weiß ich auch, warum das bisher niemand angemeckert hatte. ;-)
Wer weiß, ob sowas auch passiert wäre, wenn die Browser sich bei einem clearenden Element in nichtfloatenden Boxen auch nicht daran gehalten hätten...
freundliche Grüße
Ingo
-
-
-
-
-
-