Grafik streckt Tabellenzelle in die Höhe?!

[Mischa]

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.

[hilker]

mach mal ein <br>eak hinter deine <img> Tags!

[KD-one]

Hallo,

<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>

Ändere mal diese und alle folgenden Zeilen so:
<td colspan="2" style="width:6px"><img src="window-ol.gif" style="width:6px;height:30px" border="0" alt=""></td>
Die Browser interpretieren einen Zeilenumbruch im Quelltext vor dem schliessenden "td" so, als ob tatsächlich ein Umbruch vorläge und fügen diese Abstände ein.
Der Grund für dieses Verhalten ist mir aber auch nicht bekannt.

Gruß

Kurt

[Mischa]

Hallo SelfForumler,

Die Browser interpretieren einen Zeilenumbruch im Quelltext vor dem schliessenden "td" so, als ob tatsächlich ein Umbruch vorläge und fügen diese Abstände ein.
Der Grund für dieses Verhalten ist mir aber auch nicht bekannt.

Danke, ihr zwei! Beide Tipps funktionieren gleichermaßen. Ist aber irgendwie echt ein bisschen merkwürdig, dass da ein Zeilenumbruch reininterpretiert wird, wo keiner iss...

Und dass man mit einem <br>-Tag, was ja eigentlich einen Zeilenumbruch herbeiführt, genau das Gegenteil erreicht, finde ich noch komischer - aber gut: break ist break!

In diesem Sinne:
eine gute Nacht,
Mischa

[Struppi]

Danke, ihr zwei! Beide Tipps funktionieren gleichermaßen. Ist aber irgendwie echt ein bisschen merkwürdig, dass da ein Zeilenumbruch reininterpretiert wird, wo keiner iss...

Nein, das ist keine Zeilenumbruch, sondern in deinem Quelltext ist das Zeichen \n (je nach Betriebsystem ist das was anderes) und in HTML ist es spezifieziert, das unbekannte Zeichen als Leerzeichen dargestellt werden (aber maximal nur eins auch wenn es mehrere unbekannte Zeichen sind) und wenn dann deine Grafik niedriger als die Zeichenhöhe ist da selbstverständlich ein Abstand.

Und übrigens pt ist keine Einheit für den Monitor (recherchier mal ich hab grad keinen Link). Sondern wenn überhaupt eine Größenangabe dann px. pt kann ja nach System auf dem Monitor absolut unterschiedliche Werte bedeuten. In deinem Fall ist die Schrift auf dem Mac (normalerweise) nicht mehr lesbar.

Struppi.

[Mischa]

Hallo SelfForumler,

Nein, das ist keine Zeilenumbruch, sondern in deinem Quelltext ist das Zeichen \n (je nach Betriebsystem ist das was anderes) und in HTML ist es spezifieziert, das unbekannte Zeichen als Leerzeichen dargestellt werden (aber maximal nur eins auch wenn es mehrere unbekannte Zeichen sind) und wenn dann deine Grafik niedriger als die Zeichenhöhe ist da selbstverständlich ein Abstand.

Ja, aber wo ist denn da ein unbekanntes Zeichen?! Du meinst den Zeilenumbruch im Quelltext oder?

Übrigens hab ich nach wie vor das alte Problem - allerdings nur noch im Netscape! Im IE geht's jetzt mit den zwei Tipps hervorragend!! Aber wie krieg ich das jetzt noch mit dem Netscape hin??

Mischa

[Struppi]

Hallo SelfForumler,

Nein, das ist keine Zeilenumbruch, sondern in deinem Quelltext ist das Zeichen \n (je nach Betriebsystem ist das was anderes) und in HTML ist es spezifieziert, das unbekannte Zeichen als Leerzeichen dargestellt werden (aber maximal nur eins auch wenn es mehrere unbekannte Zeichen sind) und wenn dann deine Grafik niedriger als die Zeichenhöhe ist da selbstverständlich ein Abstand.

Ja, aber wo ist denn da ein unbekanntes Zeichen?! Du meinst den Zeilenumbruch im Quelltext oder?

Ja klar, ich schrieb doch es ist ein '\n' (Newline). Das sind unter Windows sogar 2 Zeichen.

Übrigens hab ich nach wie vor das alte Problem - allerdings nur noch im Netscape! Im IE geht's jetzt mit den zwei Tipps hervorragend!! Aber wie krieg ich das jetzt noch mit dem Netscape hin??

Der Code ist jetzt <t><img .....></td> ?
Dann sollte es auch im NC 4.x funktionieren.

Meiner Meinung verwendest du zuviel styles in deinem Quelltext, ich bin eigentlich davon ausgegangen dass du nur für den IE gestaltest (es sieht zumindest so aus).

Räum den HTML Code mal auf und trenn CSS von HTML, dann kan man dir einfacher helfen. Aber mir sind soviele Sachen in dem Code aufgefallen, dass ich irgendwann aufgehört hab was zu schreiben, weil der HTML code völlig neu gestaltet werden müßte.

Struppi.

[Mischa]

Hallo,

Übrigens hab ich nach wie vor das alte Problem - allerdings nur noch im Netscape! Im IE geht's jetzt mit den zwei Tipps hervorragend!! Aber wie krieg ich das jetzt noch mit dem Netscape hin??

Der Code ist jetzt <t><img .....></td> ?
Dann sollte es auch im NC 4.x funktionieren.

Ja, der Code ist <td><img ...></td> bzw. <td><img ...><br></td> (kommt bei beidem dasselbe raus). Aber ich hab's natürlich auf die neusten Browser abgestimmt - also nicht 4.x, sondern 7.02!

Meiner Meinung verwendest du zuviel styles in deinem Quelltext, ich bin eigentlich davon ausgegangen dass du nur für den IE gestaltest (es sieht zumindest so aus).

Ich versuche, die Website für IE, Netscape und Opera zu optimieren - und das ist mir bisher auch ganz gut gelungen.

Räum den HTML Code mal auf und trenn CSS von HTML, dann kan man dir einfacher helfen. Aber mir sind soviele Sachen in dem Code aufgefallen, dass ich irgendwann aufgehört hab was zu schreiben, weil der HTML code völlig neu gestaltet werden müßte.

Du meinst also, einen eigenen CSS-Bereich erstellen, in dem ich die Formate für die ganzen HTML-Elemente vordefiniere, oder wie? Das zumindest würde sich bei mir sehr schwer gestalten, da die eine <td> z.B. ein anderes Format hat als die andere <td> nebendran und von daher schreib ich die CSS-Angaben mittels dem style-Attribut immer direkt in die HTML-Tags rein. Oder wie meinst du das mit "CSS von HTML trennen"?

Thx für deine Antwort,
Mischa

[Struppi]

Hallo,

Übrigens hab ich nach wie vor das alte Problem - allerdings nur noch im Netscape! Im IE geht's jetzt mit den zwei Tipps hervorragend!! Aber wie krieg ich das jetzt noch mit dem Netscape hin??

Der Code ist jetzt <t><img .....></td> ?
Dann sollte es auch im NC 4.x funktionieren.
Ja, der Code ist <td><img ...></td> bzw. <td><img ...><br></td> (kommt bei beidem dasselbe raus). Aber ich hab's natürlich auf die neusten Browser abgestimmt - also nicht 4.x, sondern 7.02!

Naja, das muss du ja sagen.

Aber mit dem Mozilla kann ich dein Problem nicht nachvollziehen. Du hast also vermutloch noch irgendwo ein Zeichen in deinem Code (und sei es das Newline Zeichen oder ein Tab) das dargestellt wird und da die Grafik kleiner alsi die Zeilenhöhe ist entsteht diese Lücke.

» »»

Meiner Meinung verwendest du zuviel styles in deinem Quelltext, ich bin eigentlich davon ausgegangen dass du nur für den IE gestaltest (es sieht zumindest so aus).
Ich versuche, die Website für IE, Netscape und Opera zu optimieren - und das ist mir bisher auch ganz gut gelungen.

optimieren ist schon das falsche Wort. Mann muss nichts optimieren mit HTML und CSS, versuch einfach nur gültigen Code zu schreiben.
Allerdings hab ich beim 1. schauen  drüber nur einfach nur viele Sachen gesehen, die ich einfach nicht verwenden würde (table-layout:fixed z.b.) da diese Angaben nur in neuen Browsern funktionieren. Daher mein falsche Eindruck

Du meinst also, einen eigenen CSS-Bereich erstellen, in dem ich die Formate für die ganzen HTML-Elemente vordefiniere, oder wie? Das zumindest würde sich bei mir sehr schwer gestalten, da die eine <td> z.B. ein anderes Format hat als die andere <td> nebendran und von daher schreib ich die CSS-Angaben mittels dem style-Attribut immer direkt in die HTML-Tags rein. Oder wie meinst du das mit "CSS von HTML trennen"?

Dafür gibt es z.b. Klassen.

Struppi.