Thomas: float in verbindung mit position fixed oder absolute

In meiner CSS-Datei habe ich folgenden Code geschrieben:

#dialogbox {
 margin-top:57px;
 margin-left: 45px;
 float:left;
 padding:0;
 border:none;
}
#dialogboxfix {
 margin-top:75px;
 margin-left: 45px;
 float:left;
 padding:0;
 border:none;
 position:fixed;
}

Auf manchen Seiten habe ich die Box gerne fixiert und nur die weiteren Elemente scrollen nach unten, so dass der Anzeigebereich (Box) immer fest und im Sichtfeld ist. Auf anderen Seiten scrollt die ganze Seite. Auf den fixierten Seiten springt durch die Fixierung die Dialogbox um 18 pixel nach oben, so dass ich um das auszugleichen, margin-top 18 pixel größer machen muss, damit die Box auf allen Seiten (fixierte und nicht fixierte Box) im ungescrollten Zustand genau an der gleichen Stelle steht. Im IE springt die Box gar nicht, was ja so sein soll. Im Safari 3-4 Pixel mehr oder weniger als sonst die 18.

Ähnliches Problem: Auch bei divs die mit float right oder left und mit fester width und durch margin auf Abstand nebeneinander angeordnet werden bestehen zwischen IE und den anderen Browsern und wiederum Safari geringe Pixelunterschiede. Woher kommt dies jeweils?

Ich habe inzwischen festgestellt, dass ich das gleiche Problem mit float und position:absolute habe, es verspringt nach oben. Ich vermute mal es hat mit float zu tun. Wenn ich in anderen Dateien beispielsweise position:fixed oder absolute benutze, wo also kein float verwendet wird, gibt es kein verspringen nach oben, habe es noch nicht 100% verifiziert. Kann mir einer sagen, woran das jeweils liegt.

Danke

Thomas

  1. Hi,

    Auf den fixierten Seiten springt durch die Fixierung die Dialogbox um 18 pixel nach oben, so dass ich um das auszugleichen, margin-top 18 pixel größer machen muss, damit die Box auf allen Seiten (fixierte und nicht fixierte Box) im ungescrollten Zustand genau an der gleichen Stelle steht. Im IE springt die Box gar nicht, was ja so sein soll. Im Safari 3-4 Pixel mehr oder weniger als sonst die 18.

    Ich habe dir schon in deinem anderen Thread gesagt, dass ich dein Problem so nicht fuer nachvollziehbar halte.

    Ein (valides) Online-Beispiel waere vielleicht hilfreich. </hilfe/charta.htm#tipps-fuer-fragende>

    Ich habe inzwischen festgestellt, dass ich das gleiche Problem mit float und position:absolute habe

    Float zusammen mit absoluter oder fixer Positionierung gibt's sowieso gar nicht, siehe Relationships between 'display', 'position', and 'float'.

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“
    1. Grüße,

      Float zusammen mit absoluter oder fixer Positionierung gibt's sowieso gar nicht, siehe Relationships between 'display', 'position', and 'float'.

      dachte bisher i-wie, dass relative da noch funktionieren würde - bzw. man kann einem gefloatetem element "position:absolute"; verpassen um textumfluss zu verhindern, nicht?

      MFG
      bleicher

      1. Hi,

        Float zusammen mit absoluter oder fixer Positionierung gibt's sowieso gar nicht, siehe Relationships between 'display', 'position', and 'float'.

        dachte bisher i-wie, dass relative da noch funktionieren würde

        Natuerlich kann man float und relative Positionierung kombinieren.

        • bzw. man kann einem gefloatetem element "position:absolute"; verpassen um textumfluss zu verhindern, nicht?

        Natuerlich kann man das, weil man dadurch - siehe verlinkte Seite - implizit float wieder auf none setzt.

        MfG ChrisB

        --
        „This is the author's opinion, not necessarily that of Starbucks.“
        1. Hallo,

          Können die Pixelsprünge durch unterschiedliche Defaults von Padding, Margin und border der umgebenden Elemente kommen?

          mfg, Flo

          --
          Developers are dying. Computers are getting trash. CEO's become forgetten. The only remaining things are ideas, lies and crises. So if you want to be immortal, first think, than stop it and go to microsoft and become later a manager at Lehman Brothers...
          sh:) fo:| ch:? rl:( br:^ n4:| ie:{ mo:| va:} de:> zu:} fl:{ ss:) ls:< js:|
          *Zu dem de:> Ich benutze wegen IE im moment noch tabellen, weil dieser display:table noch nicht versteht. Ich werde aber, wenn IE 6 & IE 7 < 10% mein neues CSS-Layout einspielen...
          1. Hallo,

            Können die Pixelsprünge durch unterschiedliche Defaults von Padding, Margin und border der umgebenden Elemente kommen?

            mfg, Flo

            Hallo,

            danke für deine Vermutung. Habe zu Anfang der Datei folgendes notiert:

            * {
             margin: 0;
             padding: 0;
             font-family: "trebuchet ms", helvetica, verdana, arial, sans-serif;
             font-size: 1em;
                    border:none;
            }

            Dann sollte das doch passen und zumindest nicht an Defaults liegen, oder? Verstehe ich das richtig?

            Habe in folgendem Quelltext
            http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=position+absolute

            mal in einem Editor meine divs im CSS-Bereich und im HTML-Bereich eingesetzt und geschaut, ob es springt, der Inhalt meiner divs nicht, aber der Inhalt der anderen Divs, je nachdem wo ich die divs im HTML-Teil einsetze. Verstehe nicht woran es liegt. Scheint aber schon was mit umgebenden Elementen zu tun zu haben.

            VG

            Thomas

            1. Hallo,

              Können die Pixelsprünge durch unterschiedliche Defaults von Padding, Margin und border der umgebenden Elemente kommen?

              mfg, Flo

              Dein Hinweis hat mich auf die richtige Idee gebracht, es war ein float Element im div davor (vor fixed positioniertem div), das irgendwie das springen auslöst (warum auch immer), wenn ich das div davor nicht mit float positioniere, dann springt auch nichts im div danach, super, danke dir. Endlich mal einer, der bissl ausgebrochen ist aus den eingefahrenen Gedanken.

        2. Hi,

          Float zusammen mit absoluter oder fixer Positionierung gibt's sowieso gar nicht, siehe Relationships between 'display', 'position', and 'float'.

          dachte bisher i-wie, dass relative da noch funktionieren würde

          Natuerlich kann man float und relative Positionierung kombinieren.

          • bzw. man kann einem gefloatetem element "position:absolute"; verpassen um textumfluss zu verhindern, nicht?

          Natuerlich kann man das, weil man dadurch - siehe verlinkte Seite - implizit float wieder auf none setzt.

          »»

          Danke für diesen Hinweis, damit ist eigentlich geklärt, dass es nicht an float in Verbindung mit position fixed und absolute liegen kann, woran aber sonst? Falls keiner Vermutungen hat, müsste ich die entsprechenden Dateien mal online stellen. Sind nicht gerade kurze Codes und wenn keiner ahnt woran es liegt, zweifele ich daran, dass sich das einer umfassend anschaut. Also welche Auszüge sind notwendig für Beurteilung?

          MfG ChrisB

          1. Hi,

            Sind nicht gerade kurze Codes und wenn keiner ahnt woran es liegt, zweifele ich daran, dass sich das einer umfassend anschaut. Also welche Auszüge sind notwendig für Beurteilung?

            Die, die das Problem mit minimalst moeglichem Umfang nachvollziehbar machen.

            MfG ChrisB

            --
            „This is the author's opinion, not necessarily that of Starbucks.“
            1. Die, die das Problem mit minimalst moeglichem Umfang nachvollziehbar machen.

              Tja, dann schau mer mal, ob das ein Weg ist. Bin skeptisch.

            2. Die, die das Problem mit minimalst moeglichem Umfang nachvollziehbar machen.

              MfG ChrisB

              »»

              Ok, mal schauen, wie das gehen kann.