hawkmaster1: Browser gleich, BS gleich, trotzdem Layout unterschiedlich

Hallo zusammen,

ich rufe eine Webseite von zwei unterschiedlichen PCs aus auf. Beide haben die gleiche Bildschirmauflösung, Fontgröße und auch die gleiche Firefox Version. Bei einem PC ist jedoch ein Rand um ca. 2 Pixel zu niedrig. Man sieht hier das die Höhe nicht stimmt. Der Bereich bzw. das Div hat unter anderem diese Angabe:

 border-top: 19px solid #CCC;

Bei dem PC wo es nicht stimmt müsste die Angabe auf 21px stehen damit es wieder gleich aussieht.

Mich würde interessieren, wovon das abhängig sein kann bzw. warum das so unterschiedlich aussieht? Müsste denn nicht bei gleichem Browser und gleichem Betriebssystem und Auflösung der Inhalt gleich aussehen?

vielen Dank

Gruss hawk

  1. Hallo

    Müsste denn nicht bei gleichem Browser und gleichem Betriebssystem und Auflösung der Inhalt gleich aussehen?

    Nein, das ist ein weitverbreiteter Irrtum. Es gibt immer Unterschiede, die für Laien nicht erkennbar sind.

    Genau kann man das nur klären wenn man direkt vor den beiden Rechnern sitzt und über das entsprechende Hintergrundwissen verfügt.

    Gruss

    MrMurphy

    1. Hallo,

      Genau kann man das nur klären wenn man direkt vor den beiden Rechnern sitzt und über das entsprechende Hintergrundwissen verfügt.

      Ok du scheinst das Wissen zu haben :-) An was kann man es dann doch fest machen? Was beeinflusst das Layout ?

      Gruss hawk

      1. Hallo

        Wie schon geschrieben geht ohne das entsprechende Hintergrundwissen nichts. Ein paar Stichworte werden dir kaum weiterhelfen.

        Um die Ursachen für solche Unterschiede zu finden muss man über das entsprechende Hintergrundwissen verfügen UND vor den beiden Rechnern sitzen.

        Ansonsten wäre das Finden der Ursache eher ein Zufall.

        Hast du denn mal zumindest einen Link zu der Seite? Vielleicht lässt sich daran schon einiges erkennen.

        Gruss

        MrMurphy

        1. Hallo, Danke dir für deine Hilfe.

          Hast du denn mal zumindest einen Link zu der Seite? Vielleicht lässt sich daran schon einiges erkennen.

          Leider nein. Das ist eine reine Intranet Webanwendung die ich so nicht wo anders hosten kann.

          PS: ich habe gerade mal die Seite mit dem IE 11 angeschaut auf dem PC wo der Firefox das Layout etwas anders darstellt. Der IE zeigt es richtig an bzw. genauso wie es sein sollte.

          Gruss hawk

    2. Hi,

      Müsste denn nicht bei gleichem Browser und gleichem Betriebssystem und Auflösung der Inhalt gleich aussehen?

      Nein, das ist ein weitverbreiteter Irrtum. Es gibt immer Unterschiede, die für Laien nicht erkennbar sind.

      ja, und im vorliegenden Fall sind vermutlich kleine Unterschiede im Font-Rendering der Grund dafür, dass die eine oder andere Box, die sich an ihrem Inhalt orientiert, mal etwas größer oder kleiner wird. Da reichen ja schon ganz subtile Unterschiede, etwa unterschiedlich alte Versionen derselben Schriftart, oder abweichende Einsellungen bei der Schriftglättung.

      Generell sollte man aber auch nicht erwarten, dass ein Layout immer pixelgenau identisch aussieht, man sollte ganz im Gegenteil diese Flexibilität einkalkulieren und zu seinen Gunsten ausnutzen. Und feste Größenangaben in px sollten die Ausnahme sein - etwa wenn ein Element exakt passend zu einer Bitmap-Grafik ausgerichtet sein soll, oder bei einem feinen 1px-Rahmen. Das Beispiel mit einer 19px starken Rahmenlinie, das hawk hier präsentiert, riecht aber stark danach, dass da eine andere Einheit sinnvoller wäre - vielleicht em.

      Genau kann man das nur klären wenn man direkt vor den beiden Rechnern sitzt und über das entsprechende Hintergrundwissen verfügt.

      ... und sich mit den Entwicklertools der jeweiligen Browser genau anschaut, wie die tatsächlichen Maße zustandekommen. Aber das ist IMO müßig.

      So long,
       Martin

  2. ich rufe eine Webseite von zwei unterschiedlichen PCs aus auf. Beide haben die gleiche Bildschirmauflösung, Fontgröße und auch die gleiche Firefox Version. Bei einem PC ist jedoch ein Rand um ca. 2 Pixel zu niedrig.

    Müsste denn nicht bei gleichem Browser und gleichem Betriebssystem und Auflösung der Inhalt gleich aussehen?

    In deinem speziellen Fall wäre das naheliegend. Pixel haben allerdings als Maßeinheit nur noch wenig Wert, seit die Pixeldichte (dpi) und damit die Pixelgröße je nach Gerät um den Faktor 4 bis 5 schwanken kann und Browser bzw. Betriebssysteme entsprechend umrechnen, damit "px" auf feineren Anzeigen überhaupt noch anwendbar ist.

    Unter "Auflösung" versteht zudem immer noch ein Großteil der Leute die Bildschirmabmessungen in Pixeln (1280x1024 und dergleichen), die ist für dein Problem aber völlig unerheblich. Insofern würde ich mich nicht aufs pure Hingucken verlassen, sondern ein Bildschirmfoto machen (mit der "Druck"-Taste) und dann in einem Grafikprogramm unter Vergrößerung die Pixel zählen.
    Mit den Entwicklerwerkzeugen des Browsers lassen sich außerdem die tatsächlichen Maße ausgeben. Auch das ist für die Ursachenforschung von Interesse – nicht, dass am Ende der eine Browser aus irgendeinem Grunde aus deinen "19px" 17 Pixel errechnet hat oder beim anderen 2 Pixel von woanders stammen …

    1. Hallo, danke für eure Hilfe und Tipps.

      Mit den Entwicklerwerkzeugen des Browsers lassen sich außerdem die tatsächlichen Maße ausgeben. Auch das ist für die Ursachenforschung von Interesse – nicht, dass am Ende der eine Browser aus irgendeinem Grunde aus deinen "19px" 17 Pixel errechnet hat oder beim anderen 2 Pixel von woanders stammen …

      Ich schaue mir die CSS Angaben im Firebug an. Ich kann es ja hier auch anpassen und wenn ich an dem einen PC 2px dazugebe passt es. Seis drum. Du schreibst man kann sich mit den Entwicklerwerkzeugen die tatsächlichen Maße ausgeben lassen. Ich habe im Firebug und auch im Web Developer nichts dazu gefunden.

      Gruss hawk