 AbstÄnde, RÄnder, Positionierung
Wenn Sie eine Tabelle für die Positionierung der Images und Texte erstellen kann es sein, dass sie Probleme mit Abständen und Rändern feststellen, für die es im ersten Augenblick keine Erklärung gibt.
Häufig sind diese Fehler nur im Netscape 4.x zu sehen, weil diese Browserversion sich strikt an die Konventionen hält und einen sauberen Code voraussetzt. FireFox wird, abhängig von der Notierung, ab und an ebenfalls genau das anzeigen was sie notiert haben: Unsaubere Notierungen.
Fehlerquellen
Problem: Die Tabelle räumt den Zelleninhalten mehr Platz als notwendig ein.
Tipp: Setzen sie während der Fehlersuche den Tabellenrand und nötigenfalls auch den Bildrand auf '1' (border="1"). Alternativ: Zellenhintergund einfärben (bgcolor="#FF0000"). Hier habe ich zue Demo den Zellenhintergrund rot eingefärbt!
möglicher Fehler a)
|
| |
| 
| Hier wurde es versäumt, cellspacing und cellpadding auf "0" zu setzen. Dann werden Standardwerte genommen und das kann in jedem Browser anders aussehen. Ergebnis: Ein Freiraum um den Inhalt. Die Tabellenzelle ist größer als notwendig.
|
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFF00">
möglicher Fehler b)
|
| |
|
| Hier steht das schließende TD-Tag nicht gleich hinter dem Zelleninhalt sondern erst in der nächsten (nachfolgenden) Zeile. Manche Browser interpretieren das wie ein Leerzeichen. In diesem Zusammenhang hören Sie auch von dem Begriff 'whitespace'.
|
sogenannter 'whitespace-Fehler', das schließende td-Tag steht erst in der nächsten Zeile:
<table cellspacing="0" cellpadding="0" bgcolor="#FF0000"><tr><td>
<img src="bild.jpg" width="120" height="90" border="1" alt="">
</td></tr></table>
Lösung: <td> gleich hinter dem Inhalt eintragen
<table cellspacing="0" cellpadding="0" bgcolor="#FF0000"><tr><td>
<img src="bild.jpg" width="120" height="90" border="1" alt=""></td>
</tr></table>
Einige Browser möchten auch noch ein <br> gleich hinter dem Image-Tag
<table cellspacing="0" cellpadding="0" bgcolor="#FF0000"><tr><td>
<img src="bild.jpg" width="120" height="90" border="1" alt=""><br></td>
</tr></table>
möglicher Fehler c)
Das habe ich bisher selten feststellen müssen, schließt aber Felerquellen aus. Bei Problemen ist das einen Versuch wert.
<img vspace="0" hspace="0" src="bild.jpg" ... border="1" alt="">
Das alles ist kein Grund zum Meckern! Wenn sie einen Zeilenumbuch möchten, notieren sie einen. Wenn sie keinen Abstand möchten, lassen sie auch keinen zu. Wenn sie dem Browser überlassen, wie groß Cellpadding und Cellspacing sein sollen, OK. Wenn sie das selbst bestimmen möchten, tragen sie die Werte ein. Konsequent + einfach.
Nur weil der IE großzügig über Fehler hinwegsieht, ist er nicht der bessere Browser. Wenn die Browser das alles unterschidlich handhaben, ist das ein Dilemma. Damit leben wir.
Das ist kein Tabellenfehler:
Problem: Ein Image als Verweis zeigt nach den Klicken einen farbigen Rand.
Sie haben als Verweisfläche für einen Link ein Image eingefügt. Das Image hat einen Rand durch das Attribut border="1".
<img src="bild.jpg" width="120" height="90" border="1" alt="">
alles OK |
| |
hier nicht
|
| Hier das Bild als Verweisfläche (Link).
Automatisch wird der Rand in der Farbe angezeigt, die im Body-Tag für Links festgelegt wurden.
(hier dunkelrot)
|
<body vlink="#FF007F" link="#FF007F" alink="#FFFFFF" ...
Sie könnten also:
 den Rand auf '0' setzen ( border="0")
 im BODY-Tag die Linkfarben auf schwarz setzen.
Option wäre schon mal eine Lösung, mit einer Ausnahme:
Wenn im Netscape 4.x die Linkfarbe mit CSS formatiert wurden!
Abhilfe:
Abhilfe schafft hier nur eine Kombination von BODY-Tag Attributen und CSS.
Abhilfe (Explorer) durch Bestimmung der Linkfarben im Body mit Schwarz.
<body alink="#000000" vlink="#000000" link="#000000" ...
Abhilfe (Netscape) durch Bestimmung einer Unterklasse ".schwarz" . Für die Bildlinks richten Sie mit CSS eine Unterklasse mit der gewünschten Farbe Schwarz ein und geben dem Bildink diese Unterklasse.
|
|
Für die üblichen Textlinks richten Sie ganz trickreich mit CSS eine Unterklasse mit der gewünschten Farbe ein und geben dem Text-Link diese Unterklasse.
|
im Head:
<style type="text/css">
<!--
a.menuitem
{
text-decoration: none;
font-size:12px;
color:#FFFFFF;
}
.schwarz
{
color:#000000;
}
-->
</style>
|
Beispiel Formatierung der Textlinks mit CSS:
Unterklasse "menuitem"
<a class="menuitem" href="#">
Textlink durch CSS formatiert
</a>
Für den Image-Link:
<a href="datei.htm" class="schwarz"> Image </a>
|
|
|
WWW.WEB-TOOLBOX.NET
ZURÜCK