Grafik mit einer Tabelle dastellen

[nixdorf]

Hallo,

ich habe eine Problem mit einer Tabelle, die nicht richtig im IE 6.0 dargestellt wird. Hier ist ein Link: www.linbyte.de/test

folgenden Code habe ich benutzt:

<table border="0" cellspacing="0" cellpadding="0" margin="0">     
        <tr>
          <td width="202">
            <img src="<../templates/images/banner/ban2.png" border="0" alt="" width="202" height="75" />
          </td>
        </tr>
        <tr>
          <td width="3">
            <img src="<../templates/images/banner/ban3.png" border="0" alt="" width="3" height="25" />
          </td>
        </tr>
</table>

Ich möchte, das der Zwischenraum zwischen den beiden Grafiken (der zwischen dem senkrechten Strich und dem waagerechten Strich) verschwindet.

Man kann sich das z.B. im Firefox ansehen. dort wird es richtig dargestellt.

Was muß ich machen, damit der IE 6.0 das auch richtig darstellt?

Gruß Nixdorf

[wildmieze]

Du könntest testweise versuchen, <td><img></td> komplett in eine Zeile zu schreiben .. ich meine mich zu erinnern, daß ich damit schonmal solche Abstandsprobleme gelöst hab .. nicht die feine Englische, aber wenn es klappt ..
.. wenns damit nicht geht, gibts bestimmt noch andere Lösungswege^^

Edit: .. hmm .. hat die spitze Klammer (<.. ) im img-src eine besondere Bedeutung? Hab ich noch nie gesehen ..

Edit 2: Ich habe übrigens sowohl im IE8 als auch im Firefox einen Abstand zwischen den Linien ..

Edit 3: Sorry, ich hätte mir das vorm Schreiben doch erst in Ruhe ansehen sollen .. wo gehört der senkrechte Strich denn hin? Bei IE8 und Firefox isser inner Mitte, im IE6 ist er links. Wundert mich aber auch nicht, da die tabelle "unlogisch" ist - wie soll bei einer Tabelle eine Zelle 202px breit sein, die direkt darunter aber nur 3px? da fehlen noch 199px, die irgendwohin müssen ..

[nixdorf]

Hallo. das ist nur ein Ausschnitt vom tatsächlichen Code. Ich habe ein wenig gekürzt (wenn auch etwas unglücklich) um es Deutlicher zu machen. Evtl. ist kann man am Quelltext der Seite sehen was wirklich veröffentlicht ist. Wichtig war mit im IE6 und im Firefox die unerwünschten Zwischenräume darzustellen.

[wildmieze]

Im Quelltext stehts genauso wie oben im Thread^^ .. für den Abstand isses vermutlich wirklich egal, ob der senkrechte Strich in der Mitte oder am linken Rand ist, allerdings ist es in der Mitte schwerer zu sehen, weil da eh ein Abstand nach oben ist .. aber vom Augenmaß her würd ich sagen, im IE8 und in Firefox isses tatsächlich in Ordnung ..

.. probier mal das mit der einzelnen Zeile .. ich habs grad selbst getestet, und bei mir verschwindet dann der Abstand im IE6:

<table border="0" cellspacing="0" cellpadding="0" margin="0">     
        <tr>
          <td width="202"><img src="/test/templates/beez/images/banner/ban2.jpg" border="0" alt="" width="202" height="75" /></td>
        </tr>
        <tr>
          <td width="3"><img src="/test/templates/beez/images/banner/ban3.jpg" border="0" alt="" width="3" height="25" /></td>
        </tr>
</table>

Edit: argh .. in der Codebox wird es wieder nicht einzeilig angezeigt .. aber es müsste zu sehen sein, was ich meine

[Rinaldo]

<td width="3" align="left">

müsste doch ausreichen - wenn ich es richtig verstanden habe und die Linie nicht mittig sondern links dargestellt werden soll.

Bin mal auf das Endergebnis gespannt...

EDIT

Ähm, das soll aber nicht so aussehen, wie ich es mal im Grafikprogramm bearbeitet habe?

[wildmieze]

naja, wenn die Zelle nur 3px breit ist, ist wohl die Frage, wo der Browser sie hinstellt .. Firefox und IE8 in die Mitte, der IE6 wohl links .. align=left dürfte bei der Zellenbreite dann auch nix ändern - wenn der Browser die Breite nicht selbst anpasst .. datt weiß ich nich .. *testerum* .. OK, hab nix gesagt, align-left schiebt die Grafik wirklich nach links .. hm .. ändert aber nix daran, daß da eigentlich noch ne Zelle fehlt, um ne rechteckige Tabelle zu basteln

Hehe .. genauso wie in Deinem Beispiel habe ich es zunächst auch verstanden - bis ich es mir im IE6 angesehen habe und im zweiten Erkenntnisblock gemerkt habe, daß die Grafiken sich so ja überlappen würden .. am Ende soll wohl ein Kasten rauskommen ..

[threadi]

Wieso nutzt Du für sowas eine Tabelle? Dafür sind Tabellen nicht gedacht.

Wenn Du 2 Bilder nebeneinander haben willst, dann genügt das:

<img src="/test/templates/beez/images/banner/ban2.jpg" border="0" alt="" />
<img src="/test/templates/beez/images/banner/ban3.jpg" border="0" alt="" />

Und per CSS noch sagen:

img { float: left; }

Fertig.

[wildmieze]

Die sollen wohl untereinander stehen .. aber jepp, das alleine ginge auch ohne Tabelle ..

Ich spekuliere mal: Das Tabellenkonstrukt soll hinterher einen Rahmen darstellen, in die mittlere zelle kommt dann irgendwann der Inhalt.
Wobei ich auch nicht ganz verstehe, warum da nicht mit Hintergrundbildern gearbeitet wird .. so hätte die gesamte Tabelle ja immer dieselbe Größe .. und wenn das gewünscht ist, gehts sogar noch besser, nämlich nur mit einem einzigen Hintergrundbild. Bei fester Breite und variabler Höhe reichen zwei, wenn mans lieber mag auch drei. Wenn man dann noch statt Tabellen Divs (oder evtl. andere semantisch passende Tags) nimmt, kommt man einer guten Lösung schon recht nah .. Falls meine Spekulatien überhaupt dem gewünschtem Endergebnis entsprechen. Ich glaub, dazu sollte sich der Thread-Ersteller nochmal zu Wort melden .. nixdorf, was soll denn ganz am Schluss dabei rauskommen? Oder hat Dir das mit der einzeiligen Schreibweise als IE6-Fix als Antwort schon gereicht ..?