|
|||||
|
Hintergründige RanderscheinungenÜber Browser-Ränder, oder wie Programmierer die Web-Designer in den Wahnsinn treiben.Die Standard-Ränder der Browser | Vielleicht CSS? | Der Single-Frame-Trick? | Einstellbare Ränder? | Heureka! | Quellen Das Leben als Web-Designer könnte so einfach sein: Hintergrundbild erstellen, eine passende Vordergrundgrafik aufbauen, das resultierende Bild in der Seite plazieren und schon ist das Seitendesign fertig. Dieses Szenario hat nur einen winzigen Schönheitsfehler: die kaum vorstellbare Vielfalt der Randbreiten bei verschiedenen Browsern und auf unterschiedlichen Betriebssystemen. Alles ist gut, solange der Seiteninhalt nicht auf die genaue Position des Hintergrundbildes angewiesen ist oder es keines gibt. Doch bereits ein Hintergrundbild mit einem einfachen, farbigen Randstreifen ist problematisch, wenn die über ihm liegenden Elemente halbwegs ordentlich positioniert werden sollen. Nach Jahren der Entwicklung von Web-Browsern und dem erbitterten Konkurrenzkampf zwischen Netscape und Microsoft sollte man meinen, daß dieses Problem längst Vergangenheit ist; oder wir überall nachlesen können, wie breit denn die Ränder wirklich sind. Bei meinen Recherchen im Internet bin ich aber nur auf eine brauchbare Quelle gestoßen: Auf David Siegel ...
Die Standard-Ränder verschiedener BrowserIn David Siegels Web Wonk gibt es einen Artikel, Browser Offset is Not Your Friend, in dem er das Problem aufgreift, die Ränder einiger Browser angibt und eine Testseite zur Randmessung vorstellt. Ich habe in der folgenden Tabelle seine Angaben zusammengefaßt und mit eigenen Untersuchungen ergänzt.
Ein größeres Chaos ist kaum vorstellbar. Genauer betrachtet gibt es doch eine Tendenz: Der linke Rand ist bei den meisten Browsern 8 oder 10 Pixel breit, senkrechte Randstreifen lassen sich also auf 2 Pixel genau als Hintergrundbild einrichten! Für das Design kann dabei ein mittlerer horizontaler Rand von 9 px angenommen werden. Der obere Rand ist für halbwegs genaues Arbeiten unbrauchbar. Da sind doch noch andere Browser? Richtig. Aber die Browser von Microsoft und Netscape sowie die Betriebssysteme Windows und MacOS bedienen zusammen etwa 90 % der Nutzer ... Vielleicht mit CSS?Der neueste Schrei sind Cascading Style Sheets. Dann müßte das hier eigentlich funktionieren:
Mit dem Internet Explorer 4.0x funktioniert es -- mit Navigator 4.04 nicht. Probieren wir's in zwei Jahren nochmal ... Der Single-Frame-Trick?Die Lösung des Randproblems gibt es bei Frames, denn im Frameset sind die Ränder einstellbar:
Das können Internet Explorer 3 und 4 sowie Netscape Navigator 2, 3 und 4. Eigentlich ideal, außer daß für die Netscape-Entwickler 0 = 1 ist. Nein, keine neue Mathematik: Beim Navigator ist der Abstand zur Frame-Kante mindestens ein Pixel breit. Einfach genial, oder? Spielen die Bookmarks keine Rolle und soll die Druckbarkeit einfach bleiben, könnte dem Nutzer ein "normales" Design vorgegaukelt werden: Ein Frameset mit einem Frame -- doch da kapitulliert der Netscape Navigator. Er will mindestens zwei Frames in einem Frameset, und wenn ein Frame die Abmessung "0" erhält, ist er natürlich trotzdem sichtbar ... Einstellbare Ränder?Beim Internet Explorer ab Version 2 können die Ränder eingestellt und sogar auf 0 gesetzt werden:
Mit diesen Werten kann man auch für die Zukunft sicherstellen, daß alle Internet Explorer auf allen Systemen die gleichen Ränder benutzen. Nur beim Netscape Navigator scheint es nicht zu helfen; auch nicht bei Version 4 -- oder vielleicht doch? Heureka!Schließlich wäre es zu einfach, wenn alle das gleiche täten. Deshalb haben die Entwickler bei Netscape für den Navigator 4.0x einfach die Frame-Attribute genommen. Na endlich, die Lösung ist gefunden:
Ach ja: Dann klappt's auch mit der Mathematik ;-) QuellenDavid Siegel, Browser Offset is Not Your Friend: http://www.dsiegel.com/tips/wonk14/ |
||||||||||||||||||||||||||||||||
Stand Samstag, 27. März 2004
Copyright © Samstag, 27. März 2004 by W. Esser Networks GmbH, Berlin (Germany)
E-Mail: info@esser.com. Rechtliche Hinweise. Impressum.