JEAN: Exorzist für dämonische Tabelle gesucht!

Hallo Zusammen,

ich muß ich mich mal wieder an die Profis wenden,
da sich bei folgenden Problem Verzweiflung breit
macht:

Ich arbeite gerade mit einer völlig konventionellen
Tabelle mit 2 Spalten und 2 Zeilen.

Der Quelltext meiner Datei ist unten einsehbar.

Leider muß ich feststellen, daß der INHALT in der
Spalte mit TEST3 (ROWS 2) nur bis zu dem Punkt
gehen kann, an dem auch der Inhalt TEST2 endet.

Schreibe ich in TEST 3 mehr hinein verschiebt sich
einfach die gesamte Spalte mit TEST2 nach unten,
obwohl Ihre Höhe mit 100% definiert ist und die
darüberliegende Zeile eine fixe Höhe von 150 px
besitzt.

Vermutlich ist das Problem sehr banal, aber ich
komme damit seit Stunden nicht weiter.

Es wäre wirklich -göttlich-, wenn mich jemand
beraten könnte :-)

Jean

QUELLTEXT:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>TEST</title>

<style type="text/css">

body {height:100%;position:absolute;margin:0}

</style>

</head>

<body bgcolor="#808080">

<div align="left">

<table border="1" width="600" cellpadding="0" cellspacing="0" style="height:100%">

<tr>

<td valign="top">

<table border="1" width="600" cellpadding="0" cellspacing="0" style="height:100%">

<tr>

<td colspan="4" style="height:150px" valign="top">TEST1</td>

<td rowspan="2" style="width:150px" valign="top">

TEST3<br>
<br>
INHALT

</td>

</tr>

<tr>

<td style="width:450px" valign="top">

TEST2

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

</body>

</html>

  1. Hallo,

    Warum machst Du das nicht in einer Tabelle:
    <table style="height:100%; border: 1px black solid">
      <tr>
        <td style="height:150px">Test 1</td>
        <td rowspan="2" style="vertical-align:top; width:150px">Test <br>
          Inhalt</td>
      </tr>
      <tr>
        <td style="vertical-align:top; width:450px">Test 2 </td>
      </tr>
      <tr>
        <td colspan="2">Diese Zeile war im Beispiel leer </td>
      </tr>
    </table>

    Da musst Du wohl noch ein bisschen ausrichten, aber einfacher waer's schon.

    Dieter

    1. Danke für deine Antwort, Dieter!

      Jetzt schau dir aber mal dieses Bsp. an:

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

      <html>

      <head>

      <title>TEST</title>

      <style type="text/css">

      body {height:100%;position:absolute;margin:0}

      </style>

      </head>

      <body bgcolor="#808080">

      <div align="left">

      <table style="height:100%" border="1">
        <tr>
          <td style="height:150px">Test 1</td>
          <td rowspan="2" style="vertical-align:top; width:150px">Test <br>

      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      Inhalt

      </td>
        </tr>
        <tr>
          <td style="vertical-align:top; width:450px">Test 2 </td>
        </tr>
      </table>

      </div>

      </body>

      </html>

      Jetzt macht er einfach TEST1 größer und verschiebt
      TEST2 nach unten!!!
      So soll das nicht sein. Ich habe doch für TEST1 eine
      fixe Größe angelegt. Das ist mein Problem.

      Was kann ich tun? Wäre toll, wenn du eine Idee hättest!

      Jean

      1. Hallo Jean,

        Jetzt macht er einfach TEST1 größer und verschiebt
        TEST2 nach unten!!!

        Tabellen passen sich immer dem Inhalt an. Du koennetest aber in der bewussten Zelle ein div mit style="overflow:hidden" anlegen.

        Dieter

        1. Hallo nochmals,

          ja, aber die Spalte Test1 hat doch mit dem Inhalt
          in Test 3 garnichts zu tun. Wieso verändert sich
          auch Ihre Größe, wenn ich in Test 3 Inhalt einfüge?

          Die Spalte Test1 ist doch in Ihrer Höhe fixiert.

          Wieso verändert sich nicht NUR TEST 2, wenn ich
          in Test 3 Inhalt einfüge?

          Jean

          1. Hallo

            Wieso verändert sich nicht NUR TEST 2, wenn ich
            in Test 3 Inhalt einfüge?

            Weil IE und ältere Browser bei manchen CSS-Angaben spinnen.

            Opera 6, Mozilla 1.4 und Netscape 7 machen das genau so, wie du es erwartest. IE und ältere Netscape legen die Höhen eher nach der Größe des Inhaltes fest, wobei der Inhalt in einer Zeile trotz rowspan="2" auf die anderen Zellen dieser Zeile Einfluss hat.
            Die Angabe style="height:150px" wirkt dabei eher als Mindesthöhe.

            Warum soll Test 1 diese präzise Höhe haben? Vielleicht gibt es eine ganz andere Möglichkeit, das gewünschte Aussehen zu erreichen.

            Detlef