kailew: Positionierung je nach Browser unterschiedlich?

Hallo,

ich will mit CSS einige div-Elemente positionieren:

div.map {
 position: absolute;
 top: 198px;
 left: 810px;
 height: 145px;
 width: 105px;
}
div.kurz {
 position: absolute;
 top: 348px;
 left: 810px;
 width: 105px;
 height: 250px;
}
div.bild1 {
 position: absolute;
 top: 198px;
 left: 205px;
 height: 400px;
 width: 600px;
}

Es sieht im Grunde alles gut aus, aber die Oberkante (top: 198px) fällt je nach Browser unterschiedlich aus. In der neuesten Opera-Version ist es so, wie es sein soll, die beiden Oberkanten von map und Bild1 ergeben eine Linie. Bei FF ist das map-Element leicht nach oben verschoben (etwa 5px) bei IE stark (etwa 30px) ... ich bin ratlos ...

Kai

  1. Ich dachte immer ein Pixel ist ein Pixel und nicht unterschiedlich groß, außer bei verschieden großen Bildschirmen bei verschieden großer Auflösung, was Browser, Grafikkarte und was sonst noch alles für die Darstellung von Bild zuständig ist, das automatisch anpassen.
    Vielleicht haben die Browserhersteller CSS verschieden interpretiert und compiliert + kompatibilisiert, sodass Abweichungen entstanden sind.

    1. Hallo,

      Vielleicht haben die Browserhersteller CSS verschieden interpretiert und compiliert + kompatibilisiert, sodass Abweichungen entstanden sind.

      die Pixel sind natürlich gleich, die Elemente "sitzen" einfach anders, jedenfalls das eine in bezug auf die anderen.

      Kai

      1. hat niemand eine idee?

        Kai

  2. Hallo,

    ... die beiden Oberkanten von map und Bild1 ergeben eine Linie.

    Auf keinen Fall, wo soll die denn herkommen?

    Die Boxen sind vollkommen in Ordnung, habe ihnen ein border verpasst. Was für eine Linie du da mit deinem CSS siehst, ist wohl dein Geheimnis?

    Kalle

    1. Hallo Kalle,

      Die Boxen sind vollkommen in Ordnung, habe ihnen ein border verpasst. Was für eine Linie du da mit deinem CSS siehst, ist wohl dein Geheimnis?

      ich sehe keine Linie, sonst hätte ich das ja geschrieben, sondern die Oberkanten bilden eine gedachte Linie (sie sind bündig könnte man auch sagen) - sollten sie, machen sie aber nicht, sondern die rechte Box sitzt je nach Browser etwas weiter oben. Und unterbricht die _gedachte_ Linie.

      Kai

      1. Hallo Kai,

        mit deinem geposteten Code sehe ich eine vollkommen leere Seite. Wie du da Kanten beurteilen willst, ist mir unklar.

        Aber setze mal die border Einträge in Kraft.

        <style type='text/css'>
        div.map {
         position: absolute;
         top: 198px;
         left: 810px;
         height: 145px;
         width: 105px;
         _order: 1px solid #f00;
        }
        div.kurz {
         position: absolute;
         top: 348px;
         left: 810px;
         width: 105px;
         height: 250px;
         _order: 1px solid #0f0;
        }
        div.bild1 {
         position: absolute;
         top: 198px;
         left: 205px;
         height: 400px;
         width: 600px;
         _order: 1px solid #00f;
        }
        </style>

        </head>

        <body>

        <div class=map></div>
        <div class=kurz></div>
        <div class=bild1></div>

        </body>
        </html>

        Du hast noch irgendwelchen anderen Code, der deine Linien stört.

        Kalle

        1. mit deinem geposteten Code sehe ich eine vollkommen leere Seite. Wie du da Kanten beurteilen willst, ist mir unklar.

          vielen Dank für Deine Mühe, aber Du solltest doch versuchen, auch meine Beiträge zu lesen ...

          Ich schreibe nicht von wirklichen Linien oder Kanten, sondern von _gedachten_ Linien. Dass da kein _Rahmen_ ist, ist mir schon klar - darum geht es aber auch nicht. Es geht mir um die _Bündigkeit_ der Elemente. In dem Fall um die Bündigkeit nach oben, bei der die Oberkanten der Elemente eine _gedachte_ Line bilden sollen.

          Das Ergebnis ist aber nach Browser unterschiedlich. Bei Opera gibt es diese Bündigkeit, bei FF und IE nicht. Ich wollte einfach nur wissen, ob die Positionen in den Browsern unterschiedlich interpretiert werden.

          Kai

          1. Ich schreibe nicht von wirklichen Linien oder Kanten, sondern von _gedachten_ Linien.

            Sag mal, bist du Ostfriese?

            Otto Waalkes berichtete von dem dortigen Wappentier: Weisser Adler auf weissem Grund.

            Und du erklärst nun, dass der gedachte linke Flügel etwas tiefer hängt als als der gedachte rechte.

            Was soll ich da noch antworten?

            Recht hast du und musst mit dem Problem leben.

            Kalle

            1. Ich schreibe nicht von wirklichen Linien oder Kanten, sondern von _gedachten_ Linien.

              wie gesagt, lesen kann nie schaden.

              Ich habe _nichts_ von gedachten Flügeln geschrieben sondern von einer gedachten Linie. Wenn Du nicht weiß, was der Begriff "Bündigkeit" bedeutet, dann kann ich Dir da nicht helfen. Und Du mir auch nicht, weil Du eben die Grundbegriffe nicht kennst.

              Trotzdem danke für Deine Zeit.

              Kai

              1. hi,

                wie gesagt, lesen kann nie schaden.

                Stimmt - also mach das bitte: </hilfe/charta.htm#tipps-fuer-fragende>

                Du hast bisher nicht genug Informationen geliefert, um dein Problem nachvollziehbar zu machen.

                Am besten wäre ein (validiertes) Online-Beispiel.

                Ich habe _nichts_ von gedachten Flügeln geschrieben sondern von einer gedachten Linie. Wenn Du nicht weiß, was der Begriff "Bündigkeit" bedeutet, dann kann ich Dir da nicht helfen. Und Du mir auch nicht, weil Du eben die Grundbegriffe nicht kennst.

                Und wenn du Kalles Vorschlag einer "Debug-Strategie" nicht verstehst, dann ist das dein Problem.

                Er _hat_ den Div-Elementen oben einen border verpasst, und kann damit bei seinem Testcode (du lieferst ja keinen, also muss er eigenen nehmen) erkennen, dass die Oberkanten der positionierten Elemente bündig _sind_.

                Wenn das bei dir nicht so sein sollte, dann liefere ein vollständiges Beispiel, an dem sich das Problem nachvollziehen lässt.

                gruß,
                wahsaga

                --
                /voodoo.css:
                #GeorgeWBush { position:absolute; bottom:-6ft; }
                1. Hi

                  Du hast bisher nicht genug Informationen geliefert, um dein Problem nachvollziehbar zu machen.

                  Am besten wäre ein (validiertes) Online-Beispiel.

                  ich dachte, meine Frage wäre an Klarheit nicht zu überbieten:

                  "Positionierung je nach Browser unterschiedlich?"

                  Wozu braucht bei so einer einfachen Sache ein Onlinebeispiel??? Ich habe zwei div-Elemente mit dem Top-Wert von 198px. Ich gehe davon aus, dass allein durch Angabe dieser top-Platzierung die Oberkanten der Elemente bündig sein sollten. In Opera ist das nämlich auch so, aber in FF und in IE nicht, da sitzt das rechte Element höher. Ich wollte _nur_ wissen, ob das eventuell ein bekanntes Verhalten der Browser ist?

                  Ich meine, man kann alles auch kompliziert machen.

                  Kai

                  1. hi,

                    ich dachte, meine Frage wäre an Klarheit nicht zu überbieten:

                    "Positionierung je nach Browser unterschiedlich?"

                    Gut - mögliche Antworten: It depends, oder Nein.

                    Wozu braucht bei so einer einfachen Sache ein Onlinebeispiel???

                    Wozu muss man überhaupt fragen, wenn die Sache "so einfach" ist?

                    Ich habe zwei div-Elemente mit dem Top-Wert von 198px. Ich gehe davon aus, dass allein durch Angabe dieser top-Platzierung die Oberkanten der Elemente bündig sein sollten. In Opera ist das nämlich auch so, aber in FF und in IE nicht, da sitzt das rechte Element höher. Ich wollte _nur_ wissen, ob das eventuell ein bekanntes Verhalten der Browser ist?

                    It depends.

                    Ich meine, man kann alles auch kompliziert machen.

                    Ich meine: Du kannst deinen Kram von mir aus auch gerne alleine machen.

                    gruß,
                    wahsaga

                    --
                    /voodoo.css:
                    #GeorgeWBush { position:absolute; bottom:-6ft; }
  3. ich will mit CSS einige div-Elemente positionieren:
    (...)

    Ist das der gesamte CSS-Code? Wie sieht der HTML-Code dazu aus? Ein Online-Beispiel wäre wirklich gut, denn ein auf die Schnelle von mir getestetes Beispiel zeigte im Firefox 1.5 Bündigkeit (ich habe mir erlaubt, Hintergrundfarben zu benutzen).

    --
    Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.
    Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:|