nicht angemeldet
float/clear und die Browser
Liebe Gemeinde,
ich will per CSS mittels float: und clear:, sowie der Angabe von margin: eine Überschrift links vom eigentlichen Text plazieren. Das sollte eigentlich kein Problem sein, wären da nicht diese Browser...
Beispiel: http://www.skop.net/self/float-clear.html
So sollte es aussehen:
<img src="http://www.skop.net/self/float-clear.gif" border=0 alt="">
Die nächste H3-Überschrift sollte _unter_ dem vorigen Abschnitt stehen.
Opera macht's richtig, Mozilla dehnt die Klasse 'abschnitt' nicht aus und der IE spinnt gänzlich (Die H3's sind nicht sichtbar usw.) Gibt es irgendwelche Vorschläge? Nein, Tabellen gelten nicht als Lösung ;)
Danke & LG
Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html
-
ich will per CSS mittels float: und clear:, sowie der Angabe von margin: eine Überschrift links vom eigentlichen Text plazieren. Das sollte eigentlich kein Problem sein, wären da nicht diese Browser...
<img src="http://www.skop.net/self/float-clear.gif" border=0 alt="">
Die nächste H3-Überschrift sollte _unter_ dem vorigen Abschnitt stehen.
Opera macht's richtig, Mozilla dehnt die Klasse 'abschnitt' nicht aus und der IE spinnt gänzlich (Die H3's sind nicht sichtbar usw.) Gibt es irgendwelche Vorschläge? Nein, Tabellen gelten nicht als Lösung ;)
Die H3-Objekte gehören wegen dem float:left nicht zum Objekt (div.abschnitt), in dem sie stehen und wirken sich deshalb auch nicht auf dessen Höhe aus. Somit können sich Deine Abschnitte garnicht auf die Höhe der Überschriften ausdehnen.
Der kleine Unterschied, den ich hier zwischen Opera und Mozilla sehe, liegt IMHO einfach nur an der Höhe der Schrift. Das Opera die Abschnitthöhe ausdehnt, halte ich für eine "optische Täuschung".Möchtest Du, daß die Abschnitte genauso hoch sind, wie die Überschriften, müsstest Du wahrscheinlich für die Abschnitte position:relative setzen. Damit ist der Container für die fliegenden Bauten der jeweilige Abschnitt, nicht das Browserfenster.
Ich bin davon abgesehen ja der Meinung, daß die Browser hier grundsätzlich etwas falsch machen und das sich derselbe Effekt auch mit display:block erreichen lassen müsste. Laut http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block sollte jedes Block-Element der Container für alle seine Kinder sein, und Elemente mit float sollten sich an ihrem Container ausrichten.
Merkwürdigerweise richten die sich aber alle grundsätzlich am Fenster aus. Habe ich da was falsch verstanden oder ist das tatsächlich ein Browserproblem?Was Mozilla definitiv falsch macht: Er beachtet das clear:left der Abschnitte nicht, was dazu führt, daß die Überschriften übereinanderliegen. Schön zu sehen, wenn man die Schrift kräftig vergrößert. IMHO ein dringender Fall für http://bugzilla.mozilla.org.
Zum IE: Keine Ahnung. Der ist doof ;)
Gruß,
soenk.e-
Hi, Sönke
Die H3-Objekte gehören wegen dem float:left nicht zum Objekt (div.abschnitt), in dem sie stehen und wirken sich deshalb auch nicht auf dessen Höhe aus. Somit können sich Deine Abschnitte garnicht auf die Höhe der Überschriften ausdehnen.
Aber warum macht's dann Opera? Dass der Norweger etwas nicht implementiert hat, ok. Aber definitiv falsch macht er nur ganz wenig. In diesem Fall finde ich, er hat recht.
___________
| |
|best viewed|
|with Opera!|
|___________|Na da kommt Freude auf.
Der kleine Unterschied, den ich hier zwischen Opera und Mozilla sehe, liegt IMHO einfach nur an der Höhe der Schrift. Das Opera die Abschnitthöhe ausdehnt, halte ich für eine "optische Täuschung".
Nein, das ist es nicht. Wenn ich die Überschrift (H3) seitenlang mache, wird die Klasse 'abschnitt' ebenfalls wie gewünscht verlängert.
Möchtest Du, daß die Abschnitte genauso hoch sind, wie die Überschriften, müsstest Du wahrscheinlich für die Abschnitte position:relative setzen. Damit ist der Container für die fliegenden Bauten der jeweilige Abschnitt, nicht das Browserfenster.
Das werde ich ausprobieren, Danke für den Hinweis.
Ich bin davon abgesehen ja der Meinung, daß die Browser hier grundsätzlich etwas falsch machen und das sich derselbe Effekt auch mit display:block erreichen lassen müsste.
Das wäre mir auch lieber und erscheint auch logischer. Jaja, die Sache mit dem Wald und den Bäumen...
Laut http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block sollte jedes Block-Element der Container für alle seine Kinder sein, und Elemente mit float sollten sich an ihrem Container ausrichten.
Ja, nur sollten sie das bei float/clear nicht auch?
Merkwürdigerweise richten die sich aber alle grundsätzlich am Fenster aus. Habe ich da was falsch verstanden oder ist das tatsächlich ein Browserproblem?
Naja, alle drei machen es anders - leider.
Was Mozilla definitiv falsch macht: Er beachtet das clear:left der Abschnitte nicht, was dazu führt, daß die Überschriften übereinanderliegen.
Das hat mich auch etwas verwundert. Na, vielleicht kann ich's ja in zukünftigen Diskussionen verwenden...
Schön zu sehen, wenn man die Schrift kräftig vergrößert. IMHO ein dringender Fall für http://bugzilla.mozilla.org.
Och, wieso dringend? Bis die Seite steht, kann er es >;)
Zum IE: Keine Ahnung. Der ist doof ;)
Ok, dann lass' ich's so.
Jedenfalls Danke & LG
Orlando (will nach Hause!!!1)--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html-
Die H3-Objekte gehören wegen dem float:left nicht zum Objekt (div.abschnitt), in dem sie stehen und wirken sich deshalb auch nicht auf dessen Höhe aus. Somit können sich Deine Abschnitte garnicht auf die Höhe der Überschriften ausdehnen.
Aber warum macht's dann Opera? Dass der Norweger etwas nicht implementiert hat, ok. Aber definitiv falsch macht er nur ganz wenig. In diesem Fall finde ich, er hat recht.
Tja? Schau Dir mal das Beispiel mit den roten Rahmen in der CSS2-Doku an: http://www.w3.org/TR/REC-CSS2/visuren.html#floats. Nun steht da blöderweise kein Quelltext bei und es könnte sein, daß sich <p>s anders verhalten als <div>s. Aber eigentlich sind das doch beides Blockelemente, oder nicht?
Ich bin davon abgesehen ja der Meinung, daß die Browser hier grundsätzlich etwas falsch machen und das sich derselbe Effekt auch mit display:block erreichen lassen müsste.
Das wäre mir auch lieber und erscheint auch logischer. Jaja, die Sache mit dem Wald und den Bäumen...
Laut http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block sollte jedes Block-Element der Container für alle seine Kinder sein, und Elemente mit float sollten sich an ihrem Container ausrichten.
Ja, nur sollten sie das bei float/clear nicht auch?
Äh, wo jetzt? Momentan richten sie sich am Fenster aus und der Mozilla macht halt den Fehler, das clear nicht zu beachten.
Was Mozilla definitiv falsch macht: Er beachtet das clear:left der Abschnitte nicht, was dazu führt, daß die Überschriften übereinanderliegen.
Schön zu sehen, wenn man die Schrift kräftig vergrößert. IMHO ein dringender Fall für http://bugzilla.mozilla.org.
Och, wieso dringend? Bis die Seite steht, kann er es >;)
Dazu mußt Du es ihm aber erstmal erzählen :) Wo Du doch so eine schöne Beispielseite hast. So einen eindeutigen Fehler hat man ja nun wirklich eher selten, wär' schade, wenn der (bzw. Deine Seite) "ungenutzt" dahinzieht.
Gruß,
soenk.e-
Hi,
Tja? Schau Dir mal das Beispiel mit den roten Rahmen in der CSS2-Doku an: http://www.w3.org/TR/REC-CSS2/visuren.html#floats.
Ja, da war ich natürlich schon, deshalb war ich vom Mozilla-Ergebnis ziemlich überrascht.
Nun steht da blöderweise kein Quelltext bei und es könnte sein, daß sich <p>s anders verhalten als <div>s. Aber eigentlich sind das doch beides Blockelemente, oder nicht?
Richtig, solange sie mit 'display' nicht gegenteilig formatiert werden, was ich ja nicht getan habe.
Ich bin davon abgesehen ja der Meinung, daß die Browser hier grundsätzlich etwas falsch machen und das sich derselbe Effekt auch mit display:block erreichen lassen müsste.
Das war dann leider allen Browsern egal.
Momentan richten sie sich am Fenster aus und der Mozilla macht halt den Fehler, das clear nicht zu beachten.
Das ist zwar unschön, aber solange der IE kein bisschen mitmacht, kann ich dieses Layout ohnehin in die 'Rundablage' werfen, so traurig das ist.
Schön zu sehen, wenn man die Schrift kräftig vergrößert. IMHO ein dringender Fall für http://bugzilla.mozilla.org.
Also ich muss gestehen, dass dieses System _überhaupt_ nicht durchblicke. Die Suche nach einem ähnlichen Bug habe ich bald aufgegeben.
Och, wieso dringend? Bis die Seite steht, kann er es >;)
Dazu mußt Du es ihm aber erstmal erzählen :) Wo Du doch so eine schöne Beispielseite hast. So einen eindeutigen Fehler hat man ja nun wirklich eher selten, wär' schade, wenn der (bzw. Deine Seite) "ungenutzt" dahinzieht.
Die Seite lasse ich natürlich online. Also hier mein Aufruf an alle Kammerjäger, die ihren Drachen entwanzen wollen: "Frische Käfer! Wer will, wer mag, wer hat noch nicht?" ;)
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html-
So, nun muß ich mich gleich zweimal korrigieren:
1. Elemente mit gesetzem float werden zumindest von Mozilla tatsächlich am darüberliegenden <div> ausgerichtet, nicht am Fenster, wie ich es geschrieben hatte.
Bestes Beispiel ist ja Deine Seite mit den Überschriften, wo Du die <h3>s mit -165px nach links aus ihren <div>s heraus bewegt hast.2. Bei der Berechnung von Höhe und Breite von Elementen werden Kinder mit float _nicht_ dazugezählt. In http://www.w3.org/TR/REC-CSS2/visudet.html#q17 heißt es eindeutigerweise:
"Only children in the normal flow are taken into account (i.e.,
floating boxes and absolutely positioned boxes are ignored, and
relatively positioned boxes are considered without their offset)."Opera macht es bei Dir also falsch. Willst Du die Höhe der Überschrift entsprechend haben, mußt Du noch ein Element mit clear:left an's Ende jedes Abschnitts setzen.
Die Seite lasse ich natürlich online. Also hier mein Aufruf an alle Kammerjäger, die ihren Drachen entwanzen wollen: "Frische Käfer! Wer will, wer mag, wer hat noch nicht?" ;)
Mir! Mir! http://bugzilla.mozilla.org/show_bug.cgi?id=148994 :)
Gruß,
soenk.e-
hi
Mir! Mir! http://bugzilla.mozilla.org/show_bug.cgi?id=148994 :)
..*grummel* der hängt erstmal bei Attinasi - oder eben auch nicht (der arbeitet nimma bei Netscape)..
Grüße aus Bleckede
Kai
-
Mir! Mir! http://bugzilla.mozilla.org/show_bug.cgi?id=148994 :)
..*grummel* der hängt erstmal bei Attinasi - oder eben auch nicht (der arbeitet nimma bei Netscape)..
Wobei sich die Frage stellt, ob's tatsächlich ein Fehler ist, nur so aussieht oder es sich um ein Loch in der Spezifikation handelt (siehe Kommentare zum Fehler bei Bugzilla).
Gruß,
soenk.e-
Hi, Sönke
Mir! Mir! http://bugzilla.mozilla.org/show_bug.cgi?id=148994 :)
Wenn du so scharf darauf bist - ich finde bestimmt noch was ;)
Wobei sich die Frage stellt, ob's tatsächlich ein Fehler ist, nur so aussieht oder es sich um ein Loch in der Spezifikation handelt (siehe Kommentare zum Fehler bei Bugzilla).
IMHO ist es kein richtiger Fehler, es ist sogar recht gut nachvollziehbar und eher Auslegungssache. Ich hab' mal ein Beispiel hochgeladen, damit es auch ersichtlich ist: http://www.skop.net/self/float-clear-2.html Das darf von Mitgliedern der religiösen Gemeinschaft namens 'Church of Mozilla' natürlich an die zuständigen Exorzisten weitergeleitet werden. ;)
Sobald die verschobene Überschrift (H3) nicht gänzlich von der umgebenden Klasse 'par' getrennt ist (Beispiel 2), wird sie bei dessen Höhe berücksichtigt. Das ist ja an sich nicht unlogisch.
Mozilla und Opera sind sich allerdings bei Beispiel 1 nicht einig (bei Opera sehen beide gleich aus), was immer auf einen Spielraum in der Spezifikation deutet. Die H3 befindet sich ja innerhalb dieser Klasse - wenn auch nicht mehr, was die endgültige Position betrifft. *grübel*
Nun, wie dem auch sein - wenn ich mir das Ergebnis im IE ansehe, ist das wohl eine akademische Diskussion. Mistding, verd... ;)
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html
-
-
-
-
-
-
-