Pixelgenauigkeit / Browserkompatibilität

Gelesen bei AboutWebDesign.de
URL: http://www.aboutwebdesign.de/awd/content/972337050.shtml

Es gibt keine Möglichkeit, mit HTML pixelorientiert und Browser-unabhängig zu arbeiten? Stimmt? Erfahren Sie mehr über Ihre Möglichkeiten als pixelgenauer Webdesigner.

Frames oder Tabelle?

Grundsätzlich gibt es zwei Möglichkeiten: entweder, Sie setzen Tabellen ein, oder Sie entscheiden sich für Frames. Grund: Sie brauchen ein stabiles Grundgerüst, auf das Sie weitergehende Layout-Teile aufsetzen können.

Beide Möglichkeiten sind gleichwertig, wenn es darum geht, unser Ziel - das pixelgenaue Layout - zu erreichen. Sie sollten Ihre Entscheidung aber sorgfältig überdenken, denn es gibt gute Argumente gegen Frames (siehe Design-Praxis).

Der GIF-Trick

Wenn Sie sich für die Tabellen-Lösung entschieden haben, können Sie feste Zellengrößen mit dem width- bzw. dem height-Attribut festlegen. Oft passiert es jedoch, dass Browser sich eigenmächtig über diese Angaben hinwegsetzen. Die Lösung: stellen Sie ein 1x1-Pixel-GIF in Ihre "Problem-Zellen", das optimalerweise vollständig transparent sein sollte. Geben Sie diesem GIF dann im Code mit width="xyz" bzw. height="xyz" eine bestimmte Breite/Höhe, und der Browser wird die Zelle nicht mehr verkleinern, ohne dass Sie es wollen.

Vergessen Sie nicht, im IMG-Tag das Attribut align zu verwenden, das vermeidet Layout-Probleme. Um wirkliche Pixel-Genauigkeit zu erreichen, müssen hier auch hspace und vspace auf 0 gesetzt werden.

Die Sache mit den Bildern

Ihre Bilder stehen immer genau so, wie sie eigentlich nicht stehen sollten? Im NN ist der Abstand zum Rand größer als im IE? Setzen Sie bei den IMG-Tags grundsätzlich die Werte align, hspace und vspace.

Die Sache mit den Zellen

Seltsam: im NN sehen Tabellen anders aus als im IE. Die Lösung: definieren Sie die Attribute border, cellspacing und cellpadding des Table-Tags, denn der NN hat hier andere Standard-Werte als der IE.

Hintergrundfarbe adé?

Der Netscape Navigator hat die unangenehme Eigenschaft, Angaben zur Hintergrundfarbe einer Zelle zu ignorieren, wenn die Zelle leer ist. Setzen Sie in diesem Fall einfach ein transparentes GIF in die betroffenen Zellen ein, das wird das Problem beheben.

Wiederholende Hintergrundbilder

Manchmal kachelt der Netscape Navigator Tabellen-Hintergrundbilder, obwohl das überhaupt nicht erwünscht ist. Definieren Sie dann als Hintergrundbild für die Zelle, in der gekachelt wird, eine Datei, die nicht existiert.

Verzicht auf CSS

Der NN zeigt im Zusammenspiel mit CSS manchmal ein extrem seltsames Verhalten, besonders, wenn absolute Positionierungen eingesetzt werden. Insgesamt zeigen Erfahrungen, dass auf CSS-Befehle zur Positionierung verzichtet werden sollte, die zur Veränderung des Schriftbildes sind jedoch meist recht unproblematisch.

Notfalls: komplette Neuordnung des Codes

Bedauerlicherweise scheint der Netscape 4.x noch nicht einmal normales HTML zuverlässig verarbeiten zu können. Solange sich die Besserung versprechende Version 6 noch nicht flächendeckend durchgesetzt hat, kann es immer wieder passieren, dass ein syntaktisch völlig korrektes Code-Gerüst vom Navigator bestenfalls verzerrt dargestellt wird.

Um das im Vorhinein zu vermeiden, sollte man Zwischen-Tests durchführen, so z.B. nach dem Aufbau des Tabellen-Grundgerüsts.

Ist es aber trotzdem zum "Worst Case" gekommen, hilft manchmal nur eines: kompletter Neuaufbau der Code-Struktur. Sie sollten dann vor allem darauf achten, die Sache syntaktisch so simpel wie möglich zu halten, besonders verschachtelte Tabellen sind zu vermeiden.