Rollmops: Tabellenlayout mit width=100%

Hallo,

ich tüftle gerade an einer Seite mit Tabellenlayout. Ich hätte gerne 2 Spalten (1xNavigation udn 1x Content) und 3 Zeilen (1xHeader, 1xContent und 1xFooter).

Die Navigation soll 200px breit sein und der Content den Rest einnehmen, kein Problem, funzt perfekt.

Header und Footer sollen jeweils 50px hoch ein und Navigation bzw. Content sollen den Rest einnehmen: im Firefox kein Problem, aber im Internet Explorer funktioniert es nicht. Der teilt die Höhe irgendwie proportional auf die 3 Zeilen auf anstatt die vorgegebenen Höhen umzustezen.

Hat irgendwer eine Idee wie man dem IE beibringen könnte sich hier gleich wie der Firefox zu verhalten?

Hier der Code der Tabelle:

<table style="height: 100%; width:100%" border="1">
 <colgroup>
  <col width="200px">
  <col width="*">
 </colgroup>
 <tr style="height:50px;">
  <td>test</td>
  <td>test</td>
 </tr>
 <tr>
  <td>test</td>
  <td>test</td>
 </tr>
 <tr style="height:50px;">
  <td>test</td>
  <td>test</td>
 </tr>
</table>

Besten Dank für eure Hilfe
lg
Rollmops

  1. Hallo,

    <tr style="height:50px;">

    bin nicht ganz sicher, aber die Höhe gehört ins td.

    bydey

    --
    -- bydey ist die Signatur und Verabschiedung, nicht der Nick --
    -- Navigate all your PHP web projects with  PHP Project Browser--
    1. Hallo,

      <tr style="height:50px;">
      bin nicht ganz sicher, aber die Höhe gehört ins td.

      Hi,

      hab alle Höhenangaben in die td's gesteckt, ergibt aber sowohl in Firefox als auch in IE das genau selbe Ergebnis.

      <table style="height:100%; Width:100%" border="1">
       <colgroup>
        <col width="200px">
        <col width="*">
       </colgroup>
       <tr>
        <td style="height:50px;">test</td>
        <td style="height:50px;">test</td>
       </tr>
       <tr>
        <td>test</td>
        <td>test</td>
       </tr>
       <tr>
        <td style="height:50px;">test</td>
        <td style="height:50px;">test</td>
       </tr>
       </table>

      Hat noch jemand weitere Tipss?

      lg
      Rollmops

      1. Hallo,

        Hat noch jemand weitere Tipss?

        Wunder, wunder.
        Habe beide Codeschnipsel genommen und in FF und IE6 getestet. Sieht immer gleich aus, so wie du es beschreibst.
        Mach mal dein Cache leer!

        bydey

        --
        -- bydey ist die Signatur und Verabschiedung, nicht der Nick --
        -- Navigate all your PHP web projects with  PHP Project Browser--
      2. hab alle Höhenangaben in die td's gesteckt

        Hallo, Rollmops,
        hast du eben nicht. Schau mal in die mittlere Tabellenreihe.
        Best wishes, imho_tep

        1. hab alle Höhenangaben in die td's gesteckt

          Hallo, Rollmops,
          hast du eben nicht. Schau mal in die mittlere Tabellenreihe.

          Naja, da hab ich ja auch im tr keine Höhenangabe die ich ins td übernehmen könnte. Welche Höhe sollte ich auch angeben? Wenn ich hier 100% angebe dann wird diese Tabellenzeile so hoch wie die Bildschirmhöhe, und das will ich ja nicht.

          Ausserdem bin ich draufgekommen, dass ich über CSS noch den body und html auf height: 100% gestellt habe. Ohne das breitet sich die Tabelle weder im IE noch im Firefox über die ganze Höhe aus.

          Ich habe also im Moment also folgende Datei:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
          <html>
           <head>
            <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
            <meta name="generator" content="Adromir">
            <title>Spalten</title>
            <style type="text/css" media="screen">
                * { margin: 0; padding: 0; }
                html,body{ height: 100%;}
              </style>
           </head>

          <body>
            <table style="height:100%; Width:100%" border="1">
             <colgroup>
              <col width="200px">
              <col width="*">
             </colgroup>
             <tr>
              <td style="height:50px;">test</td>
              <td style="height:50px;">test</td>
             </tr>
             <tr>
              <td>test</td>
              <td>test</td>
             </tr>
             <tr>
              <td style="height:50px;">test</td>
              <td style="height:50px;">test</td>
             </tr>
            </table>
           </body>
          </html>

          Die zu folgendem Ergebnis führt:
          Firefox:
          Firefox

          IE:
          IE

          Best wishes, imho_tep

          Danke für eure Hilfe,
          Rollmops

          1. Hi,

            bin jetzt drauf gekommen woran es liegt: Bei Angabe einer Doctype-Definition macht der IE nicht wie er soll (egal ob transitional oder strict), ohne Doctype macht er ganz brav das gleiche wie der Mozilla. (Kann es sein, dass das etwas mit dem Quirks-Modus zu tun hat?)

            Daher: Geht es irgendwie die Funktionalität auch mit DocType-Definition zu ermöglichen, schließlich sollte das Ganze ja noch ein valides XHTML-File sein.

            Besten Dank für euren Rat

            lg
            Rollmops

            1. Daher: Geht es irgendwie die Funktionalität auch mit DocType-Definition zu ermöglichen, schließlich sollte das Ganze ja noch ein valides XHTML-File sein.

              Hallo, Rollmops,
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ist auch erlaubt und zeigt die Tabelle wie von Dir gewünscht. Mehr dazu findest Du in SELFHTML, Stichwort 'doctype'.
              Best wishes, imho_tep

              1. Daher: Geht es irgendwie die Funktionalität auch mit DocType-Definition zu ermöglichen, schließlich sollte das Ganze ja noch ein valides XHTML-File sein.

                Hallo, Rollmops,
                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ist auch erlaubt und zeigt die Tabelle wie von Dir gewünscht. Mehr dazu findest Du in SELFHTML, Stichwort 'doctype'.
                Best wishes, imho_tep

                Ja, geht. Aber was bringt eine Doytype-Angabe ohne Angabe welche Datei zum Validieren verwendet werden soll? Und geht es auch in xhtml bzw. strict? Das wäre gerne was ich gehabt hätte.

                Besten Dank
                Rollmops

  2. Moin

    nimm dafür einfach keine Tabelle sondern notfalls DIVs sinnvollerweise aber andere angemessenere per CSS positionierte Elemente, oder nutzt deine Zielgruppe Netscape und IE in der Version 4?

    Gruß
    rfb