Cyx23: Mozilla float bug?

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

  1. 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

    1. 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

      1. 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

        1. 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

      2. 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

        --
        »The Web is the minimal concession to hypertext that a sequence-and-hierarchy chauvinist could possibly make.« (Ted Nelson)
        1. 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

        2. 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

          1. 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

            1. 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

              1. 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

                1. 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

                  1. 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