Tabellen-Design wird in IE und Mozilla verhauen

[cocoon]

Hallo zusammen,

ich habe folgendes Problem:

Ich will mittels einfacher HTML-Tabellen ein grafisches Bedienelement bauen. Eigentlich dachte, das sei trivial, aber irgendwie verhauen mir sowhl der IE5 als auch Mozilla das (eigentlich primitive) Design des Elements. Der Code:

<table style="width:680px; height:26px;" cellpadding="0" cellspacing="0" border="0">

    <!-- Switch-Element: Oberer Rand -->
    <tr style="height:3px;">
        <td width="680" height="3">
            <img src="../img/frms/switcher_top_680x3.gif" border="0" width="680" height="3" />
        </td>
    </tr>
    
    <!-- Switch-Element: Bauch -->
    <tr style="height:20px;">
        <td width="680" height="20">
        
            <table width="680" height="20" cellpadding="0" cellspacing="0" border="0">
                <tr style="height:20px">
                
                    <!-- Bauch: Linker Abschluss -->
                    <td width="3" height="20">
                        <img src="../img/frms/switcher_left_3x20.gif" border="0" width="3" height="20" />
                    </td>
                    
                    <!-- Bauch: Inhalt -->
                    <td width="674" height="20" valign="middle" align="left" bgcolor="#000000">
                        &nbsp;&nbsp;<img src="../img/frms/switcher_label_chsyear_93x7.gif" border="0" width="93" height="7" />
                    </td>
                    
                    <!-- Bauch: Rechter Abschluss -->
                    <td width="3" height="20">
                        <img src="../img/frms/switcher_right_3x20.gif" border="0" width="3" height="20" />
                    </td>
                    
                <tr>
            </table>
            
        </td>
    </tr>
    
    <!-- Switch-Element: Unterer Rand -->
    <tr style="height:3px">
        <td width="680" height="3">
            <img src="../img/frms/switcher_bottom_680x3.gif" border="0" width="680" height="3" />
        </td>
    </tr>
    
</table>

Hab' da jetzt lange dran rumgefummelt, aber irgendwie weiss ich nicht weiter. Dachte eigentlich, ich hätte alles korrekt geschrieben. Ich habe mal angehängt, wie es Opera 6+7 (korrekt) anzeigt, und wie es IE und Mozilla verhauen (das Dropdown und die beiden "vor"- und "zurück"-Buttons fehlen noch im Code):

//edit: Habe jetzt auch nochmal etwas anderes probiert, indem ich die Bilder für das Design aus den Tabellenzellen genommen habe und den Zellen als Hintergrundbild zugewiesen habe und statt den Bildern blinde Gifs bzw. "& # 160;" reingepackt habe. Da ist es aber das gleiche: Irgendwie werden in Kopf- sowie Fußzeile der Tabelle eine bestimmte Höhe erzwungen (sieht man, wenn man den Rahmen auf 1 stellt, oder auch bei der zweiten Variante, weil der Hintergrund dann gekachelt wird), obwohl ich nur die angegebene Höhe von 3px haben will.

 

[Gottox]

        <td width="680" height="3">
            <img src="../img/frms/switcher_bottom_680x3.gif" border="0" width="680" height="3" />
        </td>

Entferne mal bei diesem Code alle Leerzeichen und Zeilenumbrüche:

<td width="680" height="3"><img src="../img/frms/switcher_bottom_680x3.gif" border="0" width="680" height="3" /></td>

So sollte die untere Grafik richtig angezeigt werden... Oben kannste dann das selbe machen

 

[cocoon]

Hallo Gottox,

Entferne mal bei diesem Code alle Leerzeichen und Zeilenumbrüche: [...]
So sollte die untere Grafik richtig angezeigt werden...

klasse, Danke, das funktioniert so. Bloß nachvollziehen kann ich es nicht. Warum zeigt es Opera richtig an und warum passiert das nur in Kopf- und Fußzeile, nicht aber im Mittelteil?!

 

[Gottox]

Das liegt daran, das in HTML mehrere Zeilenumbrüche und Leerzeichen hintereinander als ein Leerzeichen gesehen werden.
Wenn nun eine Tabellenzelle da steht und dahinter die besagten Leerzeichen setzt der Browser schon die Zeichenhöhe als Tabellenhöhe.

Als ich den "HTML-Bug" noch nicht kannte, hat er mich verdammt viele nerven gekostet...