Bernd Themann: Tabellenhöhe passt sich falsch an

Guten Tag,
ich bin gerade dabei eine neue Homepage zu machen (http://berndthemann.de/neu/) hab aber noch ein kleiens Problem mit der Tabellen höhe, ich möchte, dass das Menü seine festegelegt höhe bei behält und sich nur die Reihe unter dem Menü ausdehnt (falls der Inhalt länger wird)
hier nochmal der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">;
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body style="background-image:url(grafik/layout_background.gif);">
<table width="700" height="10" align="center" cellpadding="0" cellspacing="0" bgcolor="#5E5E5E">
<tr>
<td style="background-image:url(grafik/layout_topbar.gif); background-repeat:repeat-x" height="10" colspan="7"> </td>
</tr>
<tr>
<td style="background-image:url(grafik/layout_head_background.gif); background-repeat:repeat-x" height="83" colspan="7"><img src="grafik/layout_logo.jpg" width="265" height="83"></td>
</tr>
<tr>
<td style="background-image:url(grafik/layout_bottombar.gif); background-repeat:repeat-x" height="10" colspan="7"> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#7B7A7A" valign="top"><img src="grafik/menu_oben.gif" width="181" height="3"></td>
<td width="13"><img src="grafik/menu_ecke_oben.gif" width="13" height="10"></td>
<td width="5" rowspan="7"></td>
<td valign="top" align="left" bgcolor="#747474"><img src="grafik/frame_ecke_links_oben.gif" width="10" height="10"></td>
<td width="496" valign="top" bgcolor="#747474"><img src="grafik/frame_oben.gif" width="498" height="10"></td>
<td align="right"><img src="grafik/frame_ecke_rechts_oben.gif" height="10"></td>
</tr>
<tr height="51">
<td width="153"><a href="#"><img src="grafik/buttons/links.gif" width="153" height="51" border="0" onMouseOver="document.images['button_1'].src='grafik/button_hover.gif';" onMouseOut="document.images['button_1'].src='grafik/button.gif';"></a></td>
<td width="28"><img src="grafik/button.gif" width="28" height="51" name="button_1"></td>
<td bgcolor="#7B7A7A" rowspan="5" align="right"><img src="grafik/menu_right.gif" width="3" height="255"></td>
<td width="8" rowspan="7" style=" background-image:url(grafik/frame_links.gif); background-repeat:repeat-y;" bgColor="#747474"></td>
<td rowspan="7" bgcolor="#747474"><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
<td width="8" rowspan="7" style=" background-image:url(grafik/frame_rechts.gif); background-repeat:repeat-y;" bgColor="#747474"> </td>
</tr>

<tr height="51">
<td width="153"><a href="#"><img src="grafik/buttons/privat.gif" width="153" height="51" border="0" onMouseOver="document.images['button_2'].src='grafik/button_hover.gif';" onMouseOut="document.images['button_2'].src='grafik/button.gif';"></a></td>
<td width="28"><img src="grafik/button.gif" name="button_2" width="28" height="51" id="button_2"></td>
<td width="8"> </td>
</tr>

<tr height="51">
<td width="153"><a href="#"><img src="grafik/buttons/schule.gif" width="153" height="51" border="0" onMouseOver="document.images['button_3'].src='grafik/button_hover.gif';" onMouseOut="document.images['button_3'].src='grafik/button.gif';"></a></td>
<td width="28"><img src="grafik/button.gif" name="button_3" width="28" height="51" id="button_3"></td>
<td width="8"> </td>
</tr>

<tr height="51">
<td width="153"><a href="#"><img src="grafik/buttons/medien.gif" width="153" height="51" border="0" onMouseOver="document.images['button_4'].src='grafik/button_hover.gif';" onMouseOut="document.images['button_4'].src='grafik/button.gif';"></a></td>
<td width="28"><img src="grafik/button.gif" width="28" height="51" name="button_4"></td>
<td width="8"> </td>
</tr>

<tr height="51">
<td width="153"><a href="#"><img src="grafik/buttons/sonstiges.gif" width="153" height="51" border="0" onMouseOver="document.images['button_5'].src='grafik/button_hover.gif';" onMouseOut="document.images['button_5'].src='grafik/button.gif';"></a></td>
<td width="28"><img src="grafik/button.gif" name="button_5" width="28" height="51" id="button_5"></td>
<td width="8"> </td>
</tr>
<tr height="10">
<td colspan="2" align="right" valign="bottom" bgcolor="#7B7A7A" height="10"><img src="grafik/menu_unten.gif" width="181" height="3"></td>
<td><img src="grafik/menu_ecke.gif" width="13" height="10"></td>
</tr>
<tr>
<td colspan="4"> </td>
<td></td>
</tr>
<tr>
<td colspan="4"></td>
<td valign="bottom"><img src="grafik/frame_ecke_links_unten.gif" width="10" height="10"></td>
<td valign="bottom"><img src="grafik/frame_unten.gif" width="498" height="10"></td>
<td valign="top" align="left"><img src="grafik/frame_ecke_rechts_unten.gif" width="8" height="10"></td>
</tr>
</table>
</body>
</html>

was ist zu tun? Im Firefox wird es richtig dargestellt

MFG: berndthemann

  1. Moinsen,

    <tr height="51">

    das geht ja auch nicht. Der IE macht das zwar, aber es nicht valide.
    Schau mal hier was über height definiert ist:
    http://www.css4you.de/height.html Das gilt u.a. für TabellenSPALTEN nicht für -Zeilen.

    Hier gibts übrigens prima Templates für Tabellenloses Layouts
    http://www.css4you.de/wslayout1/index.html
    und
    http://intensivstation.ch/css/template.php
    und zum selber entwerfen
    http://www.csscreator.com/version2/pagelayout.php

    und für schicke Menus in CSS siehe auch hier:
    http://www.stunicholls.myby.co.uk/menus/index.html

    --
    cu,
    Maz