Jemand der weiß das Tabellenlayouts problematisch sind: Tabellen-Layout Problem mit angegebenen Doctype

Hallo,

Ich arbeite derzeit an einem Projekt wo ich das bestehende Tabellen-Layout für valides HTML nur leicht abändern, nicht jedoch durch ein komplettes CSS/div-Layout ersetzen kann. Nun bin ich auf das Problem grstoßen, dass der IE 8 bockt wenn der Doctype gesetzt ist. Im sogenannten Kompatibilitätsmodus (also Quirks Mode) bzw. ohne Doctype funktioniert es jedoch hervorragend. Firefox läuft in allen Belangen immer wie geschmiert.

Hier der Code.

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body style="margin:0px;padding:0px;">

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50" style="width:50px;background-color:#ff0000"><div style="display:block;width:50px;height:50px;">&nbsp;</div></td>
<td style="width:100%; background-color:#00ff00">&nbsp;</td>
<td width="50" style="width:50px;background-color:#0000ff"><div style="display:block;width:50px;height:50px;">&nbsp;</div></td>
</tr>
<tr>
<td width="50" style="width:50px;background-color:#ff0000"><div style="display:block;width:50px;height:50px;">&nbsp;</div></td>
<td colspan="2" style="background-color:#ffff00">gffffffffffffffffffffffffffffffffffffffffffffmmmmmmmmmmmmmmmmmmmmmmmmmmMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</td>
</tr>
</table>

</body>
</html>

Problem ist. dass die blaue Fläche mit doctype im IE größer als die gesetzten 50px wird, im Firefox bleibt es bei 50px. Das Problem tritt immer nur dann auf wenn der Inhalt in der gelben Fläche größer wird. Wie kann ich den IE dazu bringen mit validem XHTML inkl. Doctype den blauen Bereich 50px groß zu lassen während der Grüne dynamisch sich dem (zu großen) Gelben anpasst?

viele Grüße und Vielen Dank im Voraus
Jemand der weiß das Tabellenlayouts problematisch sind

  1. Hi,

    Ich arbeite derzeit an einem Projekt wo ich das bestehende Tabellen-Layout für valides HTML nur leicht abändern, nicht jedoch durch ein komplettes CSS/div-Layout ersetzen kann. Nun bin ich auf das Problem grstoßen, dass der IE 8 bockt wenn der Doctype gesetzt ist. Im sogenannten Kompatibilitätsmodus (also Quirks Mode) bzw. ohne Doctype funktioniert es jedoch hervorragend. Firefox läuft in allen Belangen immer wie geschmiert.

    Kompatibilitätsmodus vom IE8, ist nicht das was bisher unter Quirks Mode zu verstehen war, bzw. beide Verhalten sind völlig unterschiedlich voneinenander.

    Zu deinem Problem:

    Ich habe gar nichts gegen Tabellen, im Gegenteil. Aber dieser Quelltext ist nicht schön anzuschauen. Und ich bin jetzt nicht mehr ganz sicher, aber ich mein alter IE6 konnte Seiten mit <?xml version="1.0" encoding="utf-8" ?> nicht darstellen, kann aber auch dran gelegen haben, dass er leicht defekt war.

    Das unterschiedliche Verhalten ist nicht für mich erklärbar allenfalls noch vielleicht durch die interpretation des Browsers auf colspan="2" in deinem speziellen Fall.

    Mike

    1. Hallo,

      Zur Information: Der Code enthält folgende zwei Platzhalter (für normalerweise richtigen Inhalt):
      <div style="display:block;width:50px;height:50px;">&nbsp;</div
      und
      gffffffffffffffffffffffffffffffffffffffffffffmmmmmmmmmmmmmmmmmmmmmmmmmmMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM

      Zur Veranschaulichung wurde noch background-color:#...... eingefügt. Der Rest ist meines Erachtens für eine Tabellenlayout-Veranschaulichung recht übersichtlich gehalten.

      Das mit dem colspan="2" ist mir auch schon aufgefallen, ich habe bereits versucht die beiden tr's in zwei verschiedene Tabellen zu zerlegen, das Problem mit den 50px im 3. td vom 1. tr wird dadurch umschifft, nur leider hat man dann keine voneinander abhängigen Breiten mehr und schafft sich damit ein neues Problem.

      Grüße
      Jemand der weiß das Tabellenlayouts problematisch sind

      1. P.S.:

        Im IE5 und IE6 funktioniert es genauso gut wie im Quirks Mode von IE8 oder wie bei Firefox. Es scheint also ein spezielles Problem im Zusammenhang mit dem IE8 zu sein. Übrigens können die Internet Explorer ab Version 5 mit XML umgehen, nur IE vor Version 5 oder Netscape kleiner 6 haben Probleme mit XML.

        Grüße
        Jemand der weiß das Tabellenlayouts problematisch sind

  2. Hier der Code.

    <?xml version="1.0" encoding="utf-8" ?>

    Diese Zeile versetzt den IE (<8?) in den Quirksmode und ist sowieso überflüssig.

    Struppi.

    1. »» Hier der Code.
      »»
      »» <?xml version="1.0" encoding="utf-8" ?>

      Diese Zeile versetzt den IE (<8?) in den Quirksmode und ist sowieso überflüssig.

      Struppi.

      Dies kann ich nicht bestätigen, denn gerade der Quirks Modus würde die Darstellung korrekt ausgegeben, doch gerade der Standard Modus macht doch die Probleme im IE8. Das einzige was das Layout korrekt rendert ist das weglassen des Doctype (also der Quirks Mode) oder aber der Kompatibilitätsmodus bspw. durch das Setzen des Meta-Tags:
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

      Es ist also ein Problem das ausschließlich im Standard Modus des IE8 auftaucht, da der IE8 eigentlich Standard-kompatibler und bugfreier als seine Vorgänger ist, müsste die zu breite Darstellung des blauen Bereichs doch auf einen Fehler im HTML-/CSS-Code zurückzuführen sein, oder ist dies doch auf einen Bug im IE8 zurückzuführen?

      Grüße
      Jemand der weiß das Tabellenlayouts problematisch sind