Tipps fürs Webauthoring

Cross-Browser HTML

Obwohl es für HTML schon lange Standards gibt, sind die Implementierungen der verschiedenen Browser nicht ganz kompatibel. Einige Details fehlten in den früheren Standards und wurden von den Browser-Herstellern nach eigenem Gutdünken eingeführt. Dies sollte in erster Linie den Webdesignern helfen und war daher durchaus löblich, aber natürlich musste im Rahmen des Machtkampfs jeder sein eigenes Süppchen kochen. Die meisten Probleme entstehen beim genauen Positionieren, da HTML eigentlich keine Positionierung beinhaltet, sondern das Dokument lediglich logisch strukturieren sollte.

Regel Nr. 1: Defaults vermeiden

Viele Probleme lassen sich umgehen, indem man Attribute explizit angibt. Dadurch vermeidet man, dass der Browser seinen internen Defaults anwendet, denn die sind bei den verschiedenen Browsern teilweise unterschiedlich.

Tabellen

Soll innerhalb von Tabellen eine genaue Positionierung erreicht werden, dann sollte man die Attribute cellpadding und cellspacing des Table-Tags angeben:

<table border="0" cellpadding="0" cellspacing="0">

Bestimmte Werte für die Höhe oder Breite einzelner Tabellenzellen zu erreichen, ist nicht ganz einfach. Während der Internet Explorer versucht, sich recht gewissenhaft z.B. an vorgegebene Spaltenbreiten - etwa <td width="200"> - zu halten, und dies nur dann nicht macht, wenn andere Spalten zu schmal würden, ist der Netscape Navigator recht dickköpfig und versucht auch dann, selbst die beste Breite zu ermitteln, wenn die vorgegebene durchaus machbar wäre. Netscape 6 ist etwas bescheidener geworden und kann mit der Angabe colgroup zur Räson gebracht werden:

<colgroup>
  <col width="200">
  <col width="*">
  <col width="100">
</colgroup>

Das funktioniert, wenn vom Zelleninhalt her machbar, recht gut und hilft insbesondere in dem Fall, wenn Internet Explorer 4.x und Netscape noch funktioniert haben, aber Netscape 6 plötzlich die Spalten anders aufteilt.

Wenn alles nichts hilft, muss man unsichtbare GIFs zu Hilfe nehmen. Dazu erstellt man ein einfarbiges GIF und definiert diese eine Farbe als transparent. Durch die Möglichkeit mittels Größenangaben im img Tag die Grafik neu zu skalieren, kann man dieses unsichtbare GIF nun auf jede beliebige Größe bringen (und es muss nur einmal geladen werden). So wird dann z.B. eine Spalte auf 200 Pixel gezwungen:

<td width="200">
<img src="img/null.gif" width="200" height="1" border="0">

Analog geht man bei der Höhe von Tabellenreihen vor. Diese Vorgehensweise hat jedoch zwei Nachteile: Erstens resultiert das nicht unbedingt in eine Breite von 200 Pixeln, sondern es ist lediglich gewährleistet (das aber sicher), dass die Spalte mindestens 200 Pixel breit wird. Zweitens ist ein schönes Feature von Tabellen dahin, nämlich das dynamische Anpassen den Tabelleninhalts an die Bildschirmauflösung des Anwenders. Hat der Anwender nämlich eine geringere Bildschirmauflösung als gedacht, muss er nach rechts scrollen. Einen Mittelweg kann man erreichen, wenn die Spalte deswegen nicht so breit wie gewünscht gemacht wird, weil sie zu wenig Inhalt hat - was meistens auch die Ursache ist. Wenn man dann statt einer 200 Pixel breiten Grafik z.B. fünf 40 Pixel breite Grafiken einfügt, werden diese vorrangig in der Breite verteilt und man erreicht wieder die gewünschten 200 Pixel. Ist nun die Bildschirmauflösung zu gering für die 200 Pixel breite Spalte, kann der Browser die fünf Einzelgrafiken auch untereinander anordnen - und der Anwender braucht nicht zu scrollen.

Frames

Ist es notwendig, Frames pixelgenau aneinander zu legen - z.B. weil Grafiken in den verschiedenen Frames aufeinander abgestimmt sind - so müssen die Ränder der Frames auf 0 gesetzt werden. Leider bieten Netscape und Microsoft hierzu unterschiedliche Wege - zum Glück jedoch stört sich kein Browser an den Attributen des jeweils anderen, so dass die Lösung darin besteht, einfach alle Attribute anzugeben.

Ein Beispiel mit zwei Frames:

<frameset cols="210,*" border="0">
   <frame src="navi.html" frameborder="0" framespacing="0">
   <frame src="home.html" frameborder="0" framespacing="0">
</frameset>

Netscape interpretiert hier border="0" als Rahmendicke, so dass der Rahmen unsichtbar wird. Microsoft interpretiert hingegen frameborder="0" als "nein" zu Rahmen (in der Tat ist die Angabe frameborder="no" ebenso erlaubt). Das entspräche auch dem W3C-Standard, allerdings besteht Microsoft auch noch auf der Angabe framespacing="0", mit der die Rahmendicke angegeben wird und somit ganz verschwindet.

Dokument-Body

Nachdem man die Rahmen eines Framesets verschwinden hat lassen, taucht unter Umständen das Problem auf, dass sich Grafiken nicht ganz an den Rand des Rahmens positionieren lassen. Hier schlägt der standardmäßig vorhandene Freiraum rund um den Body zu. Da der Default natürlich bei verschiedenen Browsern unterschiedlich ist, sollte er für genaue Positionierung auf null gesetzt werden. Auch hier kennt wieder jeder Browser sein eigenes Attribut:

<body topmargin="0" leftmargin="0" 
 marginwidth="0" marginheight="0">

Der Internet Explorer stürzt sich hier auf die Angabe zu leftmargin und topmargin, während der Netscape Navigator sich marginwidth bzw. marginheight schnappt und interpretiert. W3C-konform wäre hier die Alternative über Cascading Style Sheets, die aber leider bei Netscape wiederum nicht korrekt funkioniert:

<body style="margin: 0">

Cross-Browser HTML ist, wie man sieht, kein Hexenwerk - man muss nur wissen, wie man ein paar Inkompatibilitäten umschiffen kann. Um einiges komplexer stellt sich dagegen das Thema Dynamic HTML dar, um das es im nächsten Abschnitt geht.

Weiter mit: Cross-Browser DHTML