Nahtlose Grafiken in allen Browsern
Ich habe mal probiert, eine Grafik in zwei Teile zu zerlegen und diese trotzdem nahtlos im Browser
anzeigen zu lassen.
Eigentlich, so habe ich mir gedacht, ist das ganz einfach: eine Tabelle, in jede Zelle eine Grafik - und fertig.
Das hat aber so nicht auf Anhieb für alle Browser funktioniert.
Für alle, die aus irgendwelchen Gründen dasselbe Problem haben, ist folgende Erklärung gedacht.
Hier ersteinmal die Struktur einer (noch) leeren Tabelle in HTML:
17 <table>
18 <tr>
19 <td>
20 Erste Reihe, erste Spalte
21 </td>
22 <td>
23 Erste Reihe, zweite Spalte
24 </td>
25 <!-- Und so weiter -->
26 </tr>
27 <tr>
28 <td>
29 Zweite Reihe, erste Spalte
30 </td>
31 <td>
32 Zweite Reihe, zweite Spalte
33 </td>
34 <!-- Und so weiter -->
35 </tr>
36 <!-- weitere Reihen -->
37 </table>
Wir trennen also die einzelnen Zellen in jeder Zeile mit <td> / </td> voneinander, die Zeilen werden von den <tr> / </tr> - Tags eingeschlossen.
Mein Gedanke war nun, einfach zwischen die <td>'s ein <img src="../irgendwas.gif"> umfasst von meinem Link zu setzen. Leider sieht das in der Praxis so aus:
Besser wird es, wenn man den Bildern keinen Rahmen erlaubt, indem man das IMG-Tag so schreibt:
<img src="../irgendwas.gif" border="0">
und dazu in der Tabelle das Cellspacing und das Cellpadding auf Null setzt:
<table border="0" cellspacing="0" cellpadding="0" >
Das sieht dann so aus:
Besucher, die nun mit Netscape 6 oder dem Internet Explorer® unterwegs sind, sehen nun schon keine Probleme mehr, mit Opera sieht man aber immernoch einen Spalt.
Und um den wegzubekommen, das ist das Große Geheimnis, muss man
alle Leerzeichen zwischen den Tags entfernen
!!!
Hier also zuerst der Code und dann die Ansicht der in allen Browsern lückenlosen Version:
1 <table border="0" cellspacing="0" cellpadding="0">
2 <tr><td><a href=""><img src="images/grafik1.gif" border="0" width="100" height="50" alt="1"></a></td><td><a href=""><img src="images/grafik2.gif" border="0" width="100" height="50" alt="2"></a></td></tr>
3 </table>
In der Hoffnung, dass ich hiermit irgendwann einmal jemanden vor'm Verzweifeln rette...
ich habe etliche Stunden vor der Kiste verbracht, bis ich diese Lösung hatte!!!
Ein letzter
Tipp:
die Funktion [CompressHTML] beziehungsweise im Menü "HTML - HTML-Seite komprimieren"
lässt sich vorzüglich zum Auffinden der unerwünschten Leerzeichen verwenden!
wolfram
[AltGr+Q]
strempfer
[punkt]
de
