AbstauBaer: Einfachste Tabellen von IE fehlinterpretiert?

Beitrag lesen

Ich bin ein ziemlicher Anfänger, aber da unser Webmaster schon seid längerem keine Zeit findet und wir unsere Page jetzt auf Webspell portieren, wollte habe ich die gelegenheit genutzt mal meine theoretischen Kenntnisse in die Praxis umzusetzen.

Ich wollte von Anfang an extrem sauberen Code schreiben und konnte es auch umsetzen; Beide Quellcodes sind laut w3c-validator Valides HTML 4.01 Transitional und umso mehr wundert es mich, dass der IE (hab mittlerweile v7) solche noch so einfach strukturierten Tabellen, so katastrophal falsch interpretiert.

Ursprünglich schien das Problem beim colspan/row zu liegen (Ich hab mittlerweile 5 verschiedene Versionen), in der letzten Version, hab ich aber ja komplett auf diese beiden Verzichtet.

Mittlerweile glaube ich, dass es an css liegt und das ganze klappen würde wenn ich alle height/width-Angaben mit html-Attributen angeben würde, aber wie gesagt ich wollte gern extrem sauberen Code und da CSS nunmal zum Designen da ist und auch dinge wie table-layout:fixed mehr für meinen Anwendungsbereich gedacht sind als die Html-Höhen und Breitenangaben, würde ich gern eine Lösung MIT css finden sofern das möglich ist.

Die grün gefärbte Tabelle ist das Problem: Im IE scheint die mitte des Banners für diese Tabelle eine unüberwindbare Grenze zu sein. Einmal hatte ich den grünen Teil links dieser Grenze, abgeschnitten war sie trotzdem.

Vielen Dank für eure Hilfe im Voraus

http://fteamplay.ft.funpic.de/Baer-Design/baer-tabelle6.html
--------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabellen</title>
<style type="text/css">
table { table-layout:fixed; background-color:#ff0000 }
td { overflow:hidden }
</style>
</head>

<body>
<table border="0px" cellpadding="0px" cellspacing="0px">
 <tr>
  <td colspan="2" width="1000px" height="211px" style="width:1000px; height:211px; background-image:url(grafiken/banner.jpg)"></td>
 </tr>
 <tr>
  <td align="left" valign="top" width="131px">
   <table border="0px" cellpadding="0px" cellspacing="0px" style="">
    <tr>
    <td style="width:131px; height:1589px; background-image:url(grafiken/linkenavi.jpg)"></td>
    </tr>
   </table>
  </td>
  <td valign="top" style="background-color:#00ff00">
   <table width="869px" align="left" border="0px" cellpadding="0px" cellspacing="0px">
    <tr>
     <td style="height:35px; width:372px; background-image:url(grafiken/lauftext.gif)"></td>
     <td style="height:35px; width:497px; background-image:url(grafiken/buttons.gif)"></td>
    </tr>
    <tr>
     <td colspan="2" valign="top" style="background-color:#aa0000">TESTTETETSTESTETSET</td>
    </tr>
   </table>
  </td>
 </tr>
</table>                                                                                                                                                                      |

</body>
</html>

==================================================

==================================================
http://fteamplay.ft.funpic.de/Baer-Design/baer-tabelle7.html
------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tabellen</title>
<style type="text/css">
table { table-layout:fixed; background-color:#ff0000 }
td { overflow:hidden }
</style>
</head>

<body>
<table border="0px" cellpadding="0px" cellspacing="0px">
 <tr>
  <td width="1000px" height="211px" style="width:1000px; height:211px; background-image:url(grafiken/banner.jpg)"></td>
 </tr>
 <tr>
  <td>
   <table border="0px" cellpadding="0px" cellspacing="0px">
    <tr>
    <!-- HAUPTFENSTER START-->
     <!-- Linke Navi Start -->
     <td>
      <table border="0px" cellpadding="0px" cellspacing="0px">
       <tr>
        <td style="width:131px; height:1589px; background-image:url(grafiken/linkenavi.jpg)"></td>
       </tr>
      </table>
     </td>
     <!-- Linke Navi Ende -->
     <!-- Rechtes Fenster Start -->
     <td valign="top" style="background-color:#00ff00">
      <table border="0px" cellpadding="0px" cellspacing="0px" >
       <tr>
        <td style="height:35px; width:372px; background-image:url(grafiken/lauftext.gif)"></td>
        <td style="height:35px; width:497px; background-image:url(grafiken/buttons.gif)"></td>
       </tr>
       <tr>
        <td valign="top">TESTTETETSTESTETSET</td>
       </tr>
      </table>
     </td>
     <!-- Rechtes Fenster Ende -->
    <!-- HAUPTFENSTER ENDE -->
    </tr>
   </table>
  </td>
 </tr>
</table>                                                                                                                                                                      |

</body>
</html>