Sabine: Netscape 6.2/height:100% - geht aber auch wieder nicht ...

Hallo und guten Morgen!

Ich habe ein kleines Problem, ist zwar nicht lebensnotwendig, aber ärgert mich doch.

Ich möchte gerne, dass die ganze Seite ausgefüllt wird, auch in Netscape 6.2 - habe hier mit css und height:100% gearbeitet (siehe Code unten), es will aber nicht. Soll heissen: Setze ich anstelle des valign=top in der ersten Tabellenzelle wird meine ganzer Inhalt auf der Seite mittig ausgerichtet - hier versteht Netscape 6.2 also die 100% - setze ich dies aber auf valign=top - weil ich möchte, dass die Tabelle eben oben beginnt und nur der Inhaltsteil (also das was in div=main steht sowie in der Tabellenzelle mit dem Bg #cc0000 (beides in der Tabellenzeile mit der class "hundrow") sich auf die ganze Seite zieht.

Ich hoffe, ich habe mich halbwegs verständlich ausgedrückt und würde mich freuen, wenn ihr einen Tipp für mich habt, wie ich das Problem in den Griff bekommen kann.

Danke im Voraus Sabine

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

<html> <head> <title>title</title> <style type="text/css"> body, html {height:100%;} table.hundert {height:100%;width:100%} td.hund {height:100%;width:100%} tr.hundrow {height:100%;width:100%} </style>

</head> <body>

<table border="0" cellspacing="0" cellpadding="0" class="hundert" valign=top>     <tr>         <td align=center <b>valign=top</b> class="hund">         <center>         <table border="0" cellpadding="0" cellspacing="0" class="hundert">             <tr>                 <td width="157"></td>                 <td width="74"></td>                 <td width="102"></td>                 <td width="*"></td>                 <td width=""></td>             </tr><tr>             <td colspan="2" style="background:url('images/back.gif')" style="width:224px; height:100px">                     <img border="0" src="images/top_l.gif" width="224" height="100" alt="office0-24.com">                 </td>                 <td colspan=3 style="background:url('images/back.gif')" style="width:100%; height:100px" valign=top align=right>                     <img border="0" src="images/top_r.jpg" align="right" width="121" height="100" alt="office0-24.com">

</td>             </tr>             <tr>                 <td rowspan=2 style="width:326px; height:105px" style="background:url('images/menu_back.gif')" colspan="3">                     <img src="images/menu_top.gif" usemap="#Call" border=0 width="326" height="110" alt="Wir rufen Sie an!">                 </td>                 <td colspan=2 valign=top bgcolor="#913837" style="background:url('images/menu.gif')" style="width:100%; height:35px" align=left>

</td>             </tr>             <tr>                 <td valign=middle bgcolor="#FFFFFF" style="width:100%; height:75px">                     <h2>Überschrift.</h2>                 </td>                 <td bgcolor="#FFFFFF" style="width:120px; height:75px" valign=bottom align=right>                     <h5>News ... News ... </h5>                 </td>             </tr>             <tr class="hundrow"><td bgcolor="#cc0000"  style="width:157px; height:100%" valign=middle rowspan=7>

<table class="hundert">                         <tr>                             <td>  </td>                         </tr>                     </table>                 </td>                 <td colspan=3 valign=middle bgcolor="#FFFFFF" class="hund" align=center>                     <table class="hundert" valign=middle>                         <tr>                             <td valign=middle class="hund">                                 <div id="main" style="z-index:1" onmouseover="cleansub();cleansuboben()" style="height:100%; width:100%;text-valign:middle">         test test test         </div>                             </td>                         </tr>                         <tr>                             <td align=center valign=bottom>                                 <hr width="70%">text text text                             </td>                         </tr>                     </table>                 </td>                 <td bgcolor="#FFFFFF" style="width:120px; height:100%" valign=top>                     <table bgcolor="#cccccc" style="width:160px; height:100%">                         <tr>                             <td bgcolor="#913736">                                 <div align=right>                                 texttext text                                 </div>

</td>                         </tr>                         <tr>                             <td>                                 <div id=news class=news>text text text                                 </div>                             </td>                         </tr>                     </table>          </td>     </tr> </table> </center>     </td>     </tr> </table>

</body> </html>

  1. Hallo und guten Morgen!

    <td align=center <b>valign=top</b> class="hund">

    Das <b>valign=top</b> wollte ich hier herausheben - ist natürlich ohne die b's im Code.

    Grüße
    Sabine

  2. hi

    Ich möchte gerne, dass die ganze Seite ausgefüllt wird, auch in Netscape 6.2 - habe hier mit css und height:100% gearbeitet (siehe Code unten), es will aber nicht. Soll heissen: Setze ich anstelle des valign=top in der ersten Tabellenzelle wird meine ganzer Inhalt auf der Seite mittig ausgerichtet - hier versteht Netscape 6.2 also die 100% - setze ich dies aber auf valign=top - weil ich möchte, dass die Tabelle eben oben beginnt und nur der Inhaltsteil (also das was in div=main steht sowie in der Tabellenzelle mit dem Bg #cc0000 (beides in der Tabellenzeile mit der class "hundrow") sich auf die ganze Seite zieht.

    ..also verstanden hab' ich auch nach 2maligem Lesen nichts. Auf jeden fall fält mir auf, dass du viel zu oft 100% verteilst! Mehr als einmal die 100% auf einer Elementebene zu verteilen, kann nicht funktionieren!

    gruss Kai

    1. hi

      Ich möchte gerne, dass die ganze Seite ausgefüllt wird, auch in Netscape 6.2 - habe hier mit css und height:100% gearbeitet (siehe Code unten), es will aber nicht. Soll heissen: Setze ich anstelle des valign=top in der ersten Tabellenzelle wird meine ganzer Inhalt auf der Seite mittig ausgerichtet - hier versteht Netscape 6.2 also die 100% - setze ich dies aber auf valign=top - weil ich möchte, dass die Tabelle eben oben beginnt und nur der Inhaltsteil (also das was in div=main steht sowie in der Tabellenzelle mit dem Bg #cc0000 (beides in der Tabellenzeile mit der class "hundrow") sich auf die ganze Seite zieht.

      ..also verstanden hab' ich auch nach 2maligem Lesen nichts. Auf jeden fall fält mir auf, dass du viel zu oft 100% verteilst! Mehr als einmal die 100% auf einer Elementebene zu verteilen, kann nicht funktionieren!

      :) Ich habs befürchtet (dass das unverständlich war, was ich da geschrieben habe) - hier mal ein Link http://www.office0-24.com in der ersten Fassung. Ziel ist es nun, dass die Seite im Netscape so aussieht wie im IE - also der rote Balken oben mit den Menüs wie Kontakt, Home etc. soll so bleiben wie er ist, der Rest - das Menü links und der Inhalt (die Grafik und der Text in der Mitte) sollte die restlichen 100% der Seite ausmachen - das Menü soll also bis ans untere Ende des Bildschirmfensters reichen und der text und Grafik mittig ausgerichtet werden und nicht so wie jetzt im Netscape sich nach dem Inhalt in der Mitte anpassen und somit mitten in der Seite abbrechen. War ich jetzt verständlicher?

      Danke im Voraus für jeden Tipp.
      Sabine

      gruss Kai

      1. :) Ziel ist es nun, dass die Seite im Netscape so aussieht wie im IE - also der rote Balken oben mit den Menüs wie Kontakt, Home etc. soll so bleiben wie er ist, der Rest - das Menü links und der Inhalt (die Grafik und der Text in der Mitte) sollte die restlichen 100% der Seite ausmachen - das Menü soll also bis ans untere Ende des Bildschirmfensters reichen und der text und Grafik mittig ausgerichtet werden und nicht so wie jetzt im Netscape sich nach dem Inhalt in der Mitte anpassen und somit mitten in der Seite abbrechen. War ich jetzt verständlicher?

        Die Tabelle besteht ja ansich aus 2 Teilen, dem oberen mit festen Höhen und dem unteren, der sich anpassen soll.
        Daher würde ich unten eine verschachtelte Tabelle nehmen, die dann selbst 100% hoch ist (also 100% der Zelle belegt).

        Etwa so:
        <body>
        <table>
        <tr><td>
        <table>oberer kram</table>
        </tr></td>
        <tr><td>
        <table>unterer, die hier 100% hoch</table>
        </tr></td>
        </table>

        gruss Kai

        1. Hallo Kai!

          Etwa so:
          <body>
          <table>
          <tr><td>
          <table>oberer kram</table>
          </tr></td>
          <tr><td>
          <table>unterer, die hier 100% hoch</table>
          </tr></td>
          </table>

          Danke, ich versuche es mal!
          Grüße
          Sabine

          gruss Kai

  3. Hej Sabine,

    ich habe mir die Seite mal mit Netscape 4.6 angeschaut, nachdem es mit IE recht gut aussah. Das Ergebnis ist allerdings nierderschmetternd:

    Die Seitenmenüs sind nach oben gerutscht und die Überschriftenleiste ziemlich nach unten mit dem Rest. Bei den Seitenmenüs sind die ganzen Subpunkte schon dazwsichengerutscht. Solltest Du Dir mal selber anschauen, denk ich...

    Gruß,
    Marko

    1. Hallo Marko!

      ich habe mir die Seite mal mit Netscape 4.6 angeschaut, nachdem es mit IE recht gut aussah. Das Ergebnis ist allerdings nierderschmetternd:

      Die Seitenmenüs sind nach oben gerutscht und die Überschriftenleiste ziemlich nach unten mit dem Rest. Bei den Seitenmenüs sind die ganzen Subpunkte schon dazwsichengerutscht. Solltest Du Dir mal selber anschauen, denk ich...

      Ja, danke - ich weiß es. Habe ich auch schon ausgebessert und läuft auf Netsape 4.6 wunderbar, möchte nun noch Netscape 6 hinbringen und dann alles online stellen.

      Zu meinem eigentlichen Problem mit der tabelle - durch Kais Tipp rührt sich gottseidank endlich mal was - aber der Netscape mag mich trotzdem nicht, nun zeigt er mir eine Höhe von 100% plus alles was oben ist.

      Die zweite Tabelle (so wie Kai es beschrieben hat), habe ich auf 100% gesetzt - und die ist nun wirklich 100% - füllt also den ganzen Bildschirm aus - nur ist eben jetzt die gesamte Seite 100% + der rote Balken oben.

      Wie immer freue ich mich über Tipps und Anregungen!

      Danke im Voraus!!

      lg
      Sabine

      PS: Hier der Code im Kurzen

      <html>
      <head>
      <title></title>
      <style type="text/css">
      body, html {height:100%;}
      table.hundert {height:100%;width:100%}
      </style>
      </head>
      <body>
      <table class="hundert">
      <tr><td>
      <table valign=top style="height:10">oberer kram</table>
      </tr></td>
      <tr><td valign=middle style="height:100%">
      <table class="hundert" valign=middle>unterer, die hier 100% hoch</table>
      </tr></td>
      </table>
      </head>
      </html>

      Gruß,
      Marko

      1. Hallo Marko!

        <html>
        <head>
        <title></title>
        <style type="text/css">
        body, html {height:100%;}
        table.hundert {height:100%;width:100%}
        </style>
        </head>
        <body>
        <table class="hundert">
        <tr><td>
        <table valign=top style="height:10">oberer kram</table>
        </tr></td>
        <tr><td valign=middle style="height:100%">

        hier die 100% weg !!!!!

        <table class="hundert" valign=middle>unterer, die hier 100% hoch</table>
        </tr></td>
        </table>
        </head>
        </html>

        1. Hallo Kai!

          hier die 100% weg !!!!!

          Wenn ich das mache, dann verteilt er mir wieder beide Tabellenzeilen der übergeordneten Tabelle auf die ganze Seite - die Angabe mit 10px für die obere Tabelle ignoriert er komplett.

          lg
          Sabine

          1. hi

            Wenn ich das mache, dann verteilt er mir wieder beide Tabellenzeilen der übergeordneten Tabelle auf die ganze Seite - die Angabe mit 10px für die obere Tabelle ignoriert er komplett.

            würde mich auch wundern, wenn die in 10px reinpasst. Der Wrt da oben muss schon erfüllbar sein (und das ist er btw. pixelgenau)

            gruss Kai

            1. Hallo Kai!

              Wenn ich das mache, dann verteilt er mir wieder beide Tabellenzeilen der übergeordneten Tabelle auf die ganze Seite - die Angabe mit 10px für die obere Tabelle ignoriert er komplett.

              würde mich auch wundern, wenn die in 10px reinpasst. Der Wrt da oben muss schon erfüllbar sein (und das ist er btw. pixelgenau)

              Ok, auch das habe ich gemacht - nutzt aber leider auch nix - meine Versuche sind alle fehlgeschlagen:

              Versuch 1: Die beiden Zeilen teilen sich beliebig auf - erste ist größer als die zweite.
              <html>
              <head>
              <title></title>
              <style type="text/css">
              body, html {height:100%;}
              table.hundert {height:100%;width:100%}
              </style>
              </head>
              <body>
              <table class="hundert" border=1>
              <tr><td>
              <table valign=top style="height:100px"><tr><td>oberer kram<br />oberer kram<br /></td></tr></table>
              </tr>
              <tr><td valign=middle>
              <table class="hundert" valign=middle><tr><td>unterer, die hier 100% hoch</td></tr></table>
              </tr></td>
              </table>
              </head>
              </html>

              Versuch 2: Die grundsätzliche Aufteilung passt - allerdings nimmt die 2. Zeile wieder genau 100% in Anspruch - die gesamte Tabelle ist also 100% + 100px groß.
              <html>
              <head>
              <title></title>
              <style type="text/css">
              body, html {height:100%;}
              table.hundert {height:100%;width:100%}
              </style>
              </head>
              <body>
              <table class="hundert" border=1>
              <tr><td>
              <table valign=top style="height:100px"><tr><td>oberer kram<br />oberer kram<br /></td></tr></table>
              </tr>
              <tr><td valign=middle style="height:100%">
              <table class="hundert" valign=middle><tr><td>unterer, die hier 100% hoch</td></tr></table>
              </tr></td>
              </table>
              </head>
              </html>

              Offensichtlich ist die Angabe der height dominierend und richtet sich nicht wie im invaliden height= bei der Tabellenangabe nach der Größe der umgebenden Tabelle- oder sehe ich das falsch. Gibt es da überhaupt einen Ausweg aus der Misere?

              Grüße
              Sabine

              gruss Kai

              1. hi

                Versuch 1: Die beiden Zeilen teilen sich beliebig auf - erste ist größer als die zweite.
                <html>
                <head>
                <title></title>
                <style type="text/css">
                body, html {height:100%;}
                table.hundert {height:100%;width:100%}
                </style>
                </head>
                <body>
                <table class="hundert" border=1>
                <tr><td>

                HIER eine höhe an die <td>. In diesem Falle wiederum 100px.

                <table valign=top style="height:100px"><tr><td>oberer kram<br />oberer kram<br /></td></tr></table>
                </tr>
                <tr><td valign=middle>
                <table class="hundert" valign=middle><tr><td>unterer, die hier 100% hoch</td></tr></table>
                </tr></td>
                </table>
                </head>
                </html>

                gruss Kai

                1. Hi!

                  Auch das habe ich gemacht: Leider vergeblich - die erste Tabellenzeile nimmt wieder eine beliebige und größere Höhe als die zweite ein.

                  lg
                  Sabine

                  HIER eine höhe an die <td>. In diesem Falle wiederum 100px.

                  <html>
                  <head>
                  <title></title>
                  <style type="text/css">
                  body, html {height:100%;}
                  table.hundert {height:100%;width:100%}
                  </style>
                  </head>
                  <body>
                  <table class="hundert" border=1>
                  <tr><td style="height:100px">
                  <table valign=top style="height:100px"><tr><td>oberer kram<br />oberer kram<br /></td></tr></table>
                  </tr>
                  <tr><td valign=middle>
                  <table class="hundert" valign=middle><tr><td>unterer, die hier 100% hoch</td></tr></table>
                  </tr></td>
                  </table>
                  </head>
                  </html>