Platzhalter

 
Platzhalter PlatzhalterPlatzhalter

Pixelgenauigkeit / Browserkompatibilität

Platzhalter
 
  Startseite
  eBook-Projekt
  Web-Lexikon
  Bücher bestellen
   
  Design-Theorie
  Design-Praxis
  Promotion
  HTML/XML-Praxis
  Projekt-Management
  Webmaster-Praxis
  Fragen & Antworten
  Technik-Ecke
   
  Portal/Links
  Buch-Rezensionen
  Software
  Impressum
PlatzhalterPlatzhalter







 

Platzhalter 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.




Autor: Alexander Dilthey | Erstmalig veröffentlicht: 23.10.2000 | Einen Artikel schreiben?

 

Neue Artikel

Rezension: Entwurfsmuster von Kopf bis Fuß
Rezension: Webdesign mit CSS
AJAX - XML und JavaScript in Schönheit vereint?
Rich Email - Flash im Newsletter
Screen Reader Usability
Comment Spam und CAPTCHAs
Logfile-Analyse selbst gemacht - ein Perl-Beispiel

Partnerprogramm




Kommentar

Ist die Freiheit der Informationsgesellschaft in Gefahr?
Derzeit leben wir in einer relativ freien Welt. Doch sind derzeit Tendenzen erkennbar, die Freiheit des Individuums den Interessen der Großindustrie zu opfern. Ein Kommentar.

Druckversion
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt!



Einführung in CSS bei HTMLWorld.