Mischa: Grafik streckt Tabellenzelle in die Höhe?!

Beitrag lesen

Hallo SelfForumler,

ich hab mal wieder ein kleines Problemchen, an dem ich nun schon seit längerer Zeit grüble und einfach nicht drauf komme, woran's liegt:

Ich bastle gerade an einem Gästebuch im XP-Design. Doch irgendwie scheint mir HTML hier einen Streich spielen zu wollen, denn sobald ich zwei Grafiken in die Tabelle einbinde, wird die betreffende Zeile um einige Pixels gestreckt, sodass ein unerwünschter Effekt entsteht.

Ich habe das Problem bereits darauf reduzieren können, dass es an den beiden Eckgrafiken liegen muss - sobald ich die linke und rechte obere Ecke entferne (also die Rundung und den Pfeil nach oben), hat die Tabellenzeile wieder die gewünschte Höhe von 30px.

So sieht die Tabelle aus mit Eck-Grafiken:
<img src="http://www.mischa-hildebrand.de/ablage/mit-ecken.gif" border="0" alt="">

Und so ohne (die Hintergrundgrafik beginnt sich hier nach unten hin zu wiederholen):
<img src="http://www.mischa-hildebrand.de/ablage/ohne-ecken.gif" border="0" alt="">

Der zugehörige Quelltext sieht folgendermaßen aus (nicht an den PHP-Variablen stören...):

----------------------------------------------------------------

<table style="font-family:Arial;width:540px;empty-cells:show;table-layout:fixed;font-size:10pt" id="text" cellspacing="0" cellpadding="0">
               <tr>
                   <td style="width:4px;height:20px"></td>
                   <td style="width:2px"></td>
                   <td ></td>
                   <td style="width:24px"></td>
                   <td style="width:4px"></td>
               </tr>
               <tr style="height:30px">
                   <td colspan="2" style="width:6px"><img src="window-ol.gif" style="width:6px;height:30px" border="0" alt="">
                   </td>
                   <td background="windowbar.gif"><span style="color:#FFFFFF;font-family:Arial;font-weight:bold;font-size:10pt"><img src="smilies/biggrin.gif"> $deinname aus $ort:</span>
                   </td>
                   <td colspan="2" style="width:28px"><a href="#top"><img src="windowx.gif" style="width:28px;height:30px" border="0" alt=""></a>
                   </td>
               </tr>
               <tr>
                   <td style="width:4px" background="windowborder-l.gif">
                   </td>
                   <td colspan="3" style="padding:6px" bgcolor="#EFEBDC">$message
                   <br><br>

<hr>
                   <a href="mailto:$email"><img src="email.gif" alt="Eine Email an $deinname schreiben!" border="0"></a> &#160;$email<br>
                   <a href="$homepage" target="_blank" ><img src="url.gif" alt="Die Homepage von $deinname besuchen!" border="0"></a>&#160;$homepage<br>
                   <img src="http://web.icq.com/whitepages/online?icq=$icq&img=5"> $icq<br>
                   <font size="1"><b>Eintragsdatum:</b> $datum | Uhrzeit: $zeit</font>
                   </td>
                   <td style="width:4px" background="windowborder-r.gif">
                   </td>
               </tr>
               <tr style="height:4px">
                   <td background="windowborder-ecke-lu.gif">
                   </td>
                   <td colspan="3" background="windowborder-u.gif">
                   </td>
                   <td background="windowborder-ecke-ru.gif">
                   </td>
               </tr>
           </table>

----------------------------------------------------------------
(Anmerkungen: Die erste <tr> ist nur zum Vordefinieren und nach oben hin Abstand halten gedacht, die zweite <tr> beinhaltet den blauen Balken, um den es geht: die Titelleiste)

Habt ihr eine Ahnung, woran diese Höhenstreckung der Tabellenzeile liegen könnte? Mit den CSS-Angaben margin und padding hab ich schon bis zum ... herumgespielt - ohne Erfolg. :(

Danke für Eure Hilfe!

Viele Grüße,
Mischa H.

--
=========================
www.youth-page.de
www.mischa-hildebrand.de