Mozilla float bug?
Cyx23
- browser
0 Jan H.0 Cyx230 Ingo Turski0 Cyx23
0 molily0 Cyx230 Tim Tepaße0 Cyx23
Hallo,
leider musste ich bei verschiedenen Beispielen Probleme des Mozilla (1.5/win) mit float festellen.
Beim folgenden Versuch eines einfachen Tests um das Problem zu isolieren scheinen aber gleich noch
mehr Fehler aufzutreten:
<html>
<head>
<style>
div { border:1px solid red; }
#eins { float:left; width:400px; height:400px; }
#zwei { width:400px; height:400px; background-color:green; }
</style>
</head>
<body>
<div id="eins"> eins </div>
<div id="zwei"> zwei </div>
</body>
</html>
Andere Beispiele sind nicht ganz so krass, so wird float ordentlich ausgeführt,
aber nur der Inhalt des zweiten div richtig positioniert und der Rahmen vermengt
sich mit dem ersten Div.
Ärgerlich auch dass beim Mozilla die Divs manchmal unnötig kleben bleiben wenn
die Seite verkleinert wird.
Was fehlt Mozilla bei float, oder übersehe ich da etwas, fehlen Angaben wie padding
usw. oder zum body als Bezug?
Gibt es grundlegendere Lösungen als z.B. hier im div #zwei mit float:right
zu beschreiben oder body mit float:left?
Grüsse
Cyx23
Hallo,
Was fehlt Mozilla bei float, oder übersehe ich da etwas, fehlen Angaben wie padding
usw. oder zum body als Bezug?
Entweder du gibst #zwei{} eine margin-left:...; angabe oder ebenfalls float:left;.
Gruss, Jan aus Dresden
Hallo,
Was fehlt Mozilla bei float, oder übersehe ich da etwas, fehlen Angaben wie padding
usw. oder zum body als Bezug?Entweder du gibst #zwei{} eine margin-left:...; angabe oder ebenfalls float:left;.
danke. Margin-left u.ä. hatte ich auch schon als unsaubere Notlösung probiert, bei Mozilla ist offenbar das float:left statt float:right beim zweiten Div die einzige wirklich floatende Möglichkeit.
Allerdings scheint das Ergebnis dann im Weiteren z.B. für Opera 7.1/7.2 nicht mehr geeignet, denn ein clear:left; bei einem folgenden dritten div wendet Mozilla auf ein anderes Div als Opera an.
Also wären, bei "html4/strict.dtd", schon drei Varianten für Mozilla1.5/Opera6, Opera7 und IE6, nötig, dazu noch eine CSS-Weiche für Opera7?
Grüsse
Cyx23
Hi,
Margin-left u.ä. hatte ich auch schon als unsaubere Notlösung probiert
wieso? mit float wird ein Element aus dem normalen Textfluß genommen und da ist für ein folgenes Element im Textfluß ein ein margin erforderlich.
Allerdings scheint das Ergebnis dann im Weiteren z.B. für Opera 7.1/7.2 nicht mehr geeignet, denn ein clear:left; bei einem folgenden dritten div wendet Mozilla auf ein anderes Div als Opera an.
Hier tippe ich mal auf eine Kostruktion wie <div style="clear:left;"></div>. Wenn Du hier noch einen Inhalt reinsetzt, sollte das Ergebnis in allen Browsern gleich sein.
freundliche Grüße
Ingo
Hallo,
Margin-left u.ä. hatte ich auch schon als unsaubere Notlösung probiert
wieso? [...]
weil bei float das Layout mehr Flexibilität behält.
Hier tippe ich mal auf eine Kostruktion wie <div style="clear:left;"></div>.
Nein danke, ich möchte auf zusätzliche Elemente verzichten und würde eher
eine CSS-Weiche für Opera 7.1/7.2 einsetzen, html*# o.ä.
Grüsse
Cyx23
Hallo,
Was fehlt Mozilla bei float, oder übersehe ich da etwas, fehlen Angaben wie padding usw. oder zum body als Bezug?
Ich glaube sogar, das ist durch den Standard so vorgesehen, aber ich blicke da sowieso nicht durch und mir kommt es immer reichlich unsinnig vor.
Entweder du gibst #zwei{} eine margin-left:...; angabe oder ebenfalls float:left;.
danke. Margin-left u.ä. hatte ich auch schon als unsaubere Notlösung probiert, bei Mozilla ist offenbar das float:left statt float:right beim zweiten Div die einzige wirklich floatende Möglichkeit.
Allerdings scheint das Ergebnis dann im Weiteren z.B. für Opera 7.1/7.2 nicht mehr geeignet, denn ein clear:left; bei einem folgenden dritten div wendet Mozilla auf ein anderes Div als Opera an.
Hm, was meinst du? Im Konformitätsmodus macht mein Opera 7.2 exakt dasselbe wie Mozilla, hier Firebird 0.6.1. Im Quirksmode macht er dasselbe wie MSIE 6.
Gehe ich richtig in der Annahme, dass es um folgendes ging?
<div id="eins"> eins </div>
<div id="zwei"> zwei </div>
<div id="drei"> drei </div>
div {border:1px solid red; width:400px; height:400px;}
#eins {float:left;}
#zwei {float:left; background-color:green;}
#drei {clear:left;}
Mir ist lediglich aufgefallen, dass ein Element mit margin-bottom vor den drei divs im Opera eine Verschiebung des dritten divs um den angegebenen Wert nach unten bewirkt. Beziehungsweise wenn beispielsweise ein p-Element davor auftaucht, gibt es keinen Abstand zu #eins und #zwei, aber dafür zwischen den beiden und #drei. Das gilt aber nicht, wenn margin-bottom explizit angegeben ist, dann taucht der Abstand zweimal gleich groß auf...
Mathias
Hallo,
Hm, was meinst du? Im Konformitätsmodus macht mein Opera 7.2 exakt dasselbe wie Mozilla, hier Firebird 0.6.1. Im Quirksmode macht er dasselbe wie MSIE 6.
ich war auch überrascht wie gut er -leider nicht verlässlich- den IE machen kann.
Gehe ich richtig in der Annahme, dass es um folgendes ging?
div { border:1px solid red; float:left; width:200px; height:200px}
#drei{clear:left}
</style>
</head>
<body>
<div id="eins"> eins </div>
<div id="zwei"> zwei </div>
<div id="drei"> drei </div>
<div id="vier"> vier </div>
Bei Opera 7 wirkt sich das clear:left nicht so aus wie bei Opera 6 und Mozilla, falls ich beim doctype keinen Schreibfehler drinenn habe ist es beim Opera 7 immer die gleiche Abweichung.
Grüsse
Cyx23
Hallo Mathias,
Ich glaube sogar, das ist durch den Standard so vorgesehen, aber ich blicke
da sowieso nicht durch und mir kommt es immer reichlich unsinnig vor.
Heißt das, ich habe ein neues Mitglied in meiner aktuellen, inoffiziellen
float-ist-doof-Front? ;-)
Tim
Hallo Tim,
Heißt das, ich habe ein neues Mitglied in meiner aktuellen, inoffiziellen
float-ist-doof-Front? ;-)
oder sollte ich mich letztendlich entscheiden zwischen float-ist-doof, em-vererbung-funzt-auch-nicht-gleich, listen-immer-anders usw., oder gleich opera-sxs?
Zumindest beim Beispiel hier im thread [pref:t=64366&m=366219] wär mal interessant was das w3c sich vorstellt.
Aber, was hast Du sonst eigentlich für aktuelle inoffizielle Probleme mit float?
Grüsse
Cyx23
Hallo Cyx,
Aber, was hast Du sonst eigentlich für aktuelle inoffizielle Probleme mit
float?
Ich stolper immer wieder mental über die Tatsache, daß das Element damit
etwas aus dem Dokumentenfluß herausgehoben wird. Ich kann inzwischen mehr
oder weniger damit umgehen, aber es widersetzt sich irgendwie immer noch
meiner persönlichen CSS-Gedankenwelt. Die Nutzung von float für den Print
kann ich mir gut vorstellen, in der Bildschirmdarstellung ist es irgendwie
intuitiv fehl am Platze.
(OK, würde man es nur für Printstylesheets benutzen, ginge es, aber...)
Tim
Hallo Tim,
Ich stolper immer wieder mental über die Tatsache, daß das Element damit
etwas aus dem Dokumentenfluß herausgehoben wird. Ich kann inzwischen mehr
oder weniger damit umgehen, aber es widersetzt sich irgendwie immer noch
meiner persönlichen CSS-Gedankenwelt. Die Nutzung von float für den Print
kann ich mir gut vorstellen, in der Bildschirmdarstellung ist es irgendwie
intuitiv fehl am Platze.
da sehe ich eher grundsätzliche Defizite bei CSS. Mich stört weniger die oft vielleicht erschwerte intuitive Anwendbarkeit, sondern erstmal fehlender Funktionsumfang von CSS (u.U. natürlich auch der IEs).
Float wenn es sich denn trotz der unterschiedlichen Interpretation für alle Browser einsetzen lässt ist aber eher ein Lichtblick, nur leider muss hier für Opera 7 per JavaScript (oder unsinnigem HTML) nachgeholfen werden, wo sich denn wieder die Frage stellt ob CSS oft weniger leistungsfähig ist als HTML, z.B. ein align-Attribut.
Grüsse
Cyx23
Hallo Cyx,
(..) sondern erstmal fehlender Funktionsumfang von CSS
Darf man fragen, welche? Ich stehe da gerade etwas auf dem Schlauch.
(u.U. natürlich auch der IEs).
Wenn wir von Konzepten reden, müssen wir den eh erstmal rauslassen. ;-)
Tim
Hallo Tim,
(..) sondern erstmal fehlender Funktionsumfang von CSS
Darf man fragen, welche? Ich stehe da gerade etwas auf dem Schlauch.
das fällt mir immer wieder auf, allerdings führe ich da keine Liste. Beim Tabellenersatz werden gleich mehrere Defizite sichtbar, auch problematisch die von dir auch schon erwähnte em-Vererbung.und natürlich gehört der IE dazu, irgendein CSS3 oder 4 nützt ja nichts.
Ein Beispiel ist die unzulängliche Abstimmung von Hintergrundfarben als Flächen bzgl. padding, margin usw., besonders bei relativen Grössenangaben nicht durchführbar (doctype strict). Nötig werden meist zusätzliche verschachtelte Divs, die bei einer klaren Trennung von "Inhalt" und Formatierung so gar nicht existieren dürften. Ersatz mit Hintergrundbildern ist zudem auch nicht möglich da diese nicht mitskalieren.
Dann ist bei der Anorddung i.d. Seite vieles unflexibel und scheint eigentlich sowohl Tabellen als auch DHTML zu benötigen, so Beziehung zur Seitengrösse oder zum Nachbarelement, z.B. müssten zwei Elemente in einer float-Beziehung stehen können und zur Seite mit klaren Proportionen zentrierbar sein ohne zusätzliche Hilfskonstruktionen.
Grüsse
Cyx23