Holger______: td -> height Angabe will im IE nicht?!

Hallo,

ich habe folgendes Problem: Firefox und andere Browser zeigen mir das Layout richtig an, aber der IE mal wieder nicht.. Kann mir da irgendjemand weiterhelfen?

CSS:

.banner {
height:25%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #00CC33;
background-color: #009900;

}
.menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #00CC33;
background-color: #3333CC;

}
.template {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #00CC33;
background-color: #990033;

}
body {
height:100%;
margin:0px;
padding:0px;
}
html {
height:100%;

}

table{
border:0px;
table-layout:fixed;
width:100%;
height:100%;
margin:0px;
padding:0px;
border-collapse:collapse;
}

xhtml:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table>
  <tr>
    <td colspan="2" class="banner">Banner</td>
  </tr>
  <tr>
    <td class="menu">Menü</td>
    <td class="template">Template</td>
  </tr>
</table>

</body>
</html>

  1. Moinsen,

    .banner {
    height:25%;

    height ist für TDs gar nicht vorgesehen:
    http://www.css4you.de/height.html

    Zitat: "Anwendbar auf: Alle außer nichtersetzende Inlineelemente, Tabellenspalten und Spaltengruppen"

    ich empfehle sowieso DIVs anstelle Tabellen für das Layout. Beispiele stehen im Menupunkt "Layouten ohne Tabellen" auf der selben Seite.

    --
    cu,
    Maz
    1. Zitat: "Anwendbar auf: Alle außer nichtersetzende Inlineelemente, Tabellenspalten und Spaltengruppen"

      Naja, habe ich nicht gewusst. Wieder was gelernt!

      ich empfehle sowieso DIVs anstelle Tabellen für das Layout. Beispiele stehen im Menupunkt "Layouten ohne Tabellen" auf der selben Seite.

      geht nicht, da die Darstellung mit Layern, oder DIVS ähnliche Probleme ergab und jetzt eigentlich alles passt, bis auf dieses Problem...

      1. Moinsen,

        geht nicht, da die Darstellung mit Layern, oder DIVS ähnliche Probleme ergab und jetzt eigentlich alles passt, bis auf dieses Problem...

        DIVS lassen sich aber prima in der Höhe definieren.
        Ansonsten hilft Dir nur ein "passender" Inhalt um die Tabellenzelle zu strecken, im Zweifel (man möge mich ob diesen Vorschlages bitte nicht steinigen) ein transparentes GIF oder PNG von 1px breite.

        --
        cu,
        Maz
        1. Moinsen,

          DIVS lassen sich aber prima in der Höhe definieren.
          Ansonsten hilft Dir nur ein "passender" Inhalt um die Tabellenzelle zu strecken, im Zweifel (man möge mich ob diesen Vorschlages bitte nicht steinigen) ein transparentes GIF oder PNG von 1px breite.

          Mein Layout, hat oben und Links beim Menü ein Hintergrundbild. Dieses soll sich bis zu einer bestimmten Auflösung nicht wiederholen... Dementsprechend sind die Bilder größer als man normal im Browser sehen kann. (1600px) Mit Layern habe ich es auch schon probiert, aber da bekomme ich es nicht hin, dass das overflow richtig funktioniert...

          1. Moinsen,

            Mein Layout, hat oben und Links beim Menü ein Hintergrundbild. Dieses soll sich bis zu einer bestimmten Auflösung nicht wiederholen...

            das geht ja per background-repeat zu definieren, ob sich das in x und/oder y-Richtung oder gar nicht wiederholt. Allerdings geht aus Deinem Quellcode nicht hervor, wo sich ein Hintergrundbild befindet.

            Ansonsten halte Dich bitte an die, die mich hier so nett korrigieren, Das Risiko Dir eine falsche Definition mitzugeben ist einfach zu hoch.

            --
            cu,
            Maz
            1. das geht ja per background-repeat zu definieren, ob sich das in x und/oder y-Richtung oder gar nicht wiederholt. Allerdings geht aus Deinem Quellcode nicht hervor, wo sich ein Hintergrundbild befindet.

              Die Tabellenfelder Banner und Menü sollten jeweils Hintergrundbilder ergänzt werden, und deshalb sollte das Feld Banner eine feste Höhe haben  und der Rest sich je nach Inhalt anpassen, aber mindestens halt eine Fensterlänge....

              jetzt habe ich es grad mit divs ausprobiert, aber jetzt bin ich genau da, wo ich nicht hin wollte, solange der Inhalt nicht länger als eine Seite ist, funktioniert das wunderbar, aber sobald es länger ist, schneidet er mit unten das Menü bei 100% ab... Mist.

              Da war die Variante mit den Tabellen doch eleganter, aber nur der IE muss natürlich mal wieder aus der Reihe tanzen...

              1. Moinsen,

                jetzt habe ich es grad mit divs ausprobiert, aber jetzt bin ich genau da, wo ich nicht hin wollte, solange der Inhalt nicht länger als eine Seite ist, funktioniert das wunderbar, aber sobald es länger ist, schneidet er mit unten das Menü bei 100% ab... Mist.

                hast Du ne Testseite online oder den ganzen Quellcode inkl. der Hintergrundgrafik(en)? Dann kann ich das evtl. fixen.

                --
                cu,
                Maz
    2. Hallo Maz.

      height ist für TDs gar nicht vorgesehen:
      http://www.css4you.de/height.html

      Aber auch nicht verboten: td-Attributreferenz

      ich empfehle sowieso DIVs anstelle Tabellen für das Layout. Beispiele stehen im Menupunkt "Layouten ohne Tabellen" auf der selben Seite.

      Ich empfehle strukturell sinnvolle Auszeichnungen in Kombination mit CSS für das Layout.

      Gruß, Ashura

      --
      Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
      Try it: Become an Opera Lover in 30 days
      Meine Browser: Opera 8.0 | Firefox 1.0.3 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
    3. Hallo,
      a) http://kim.hotpepper.ca/articles/semantic.shtml
      [..]

      Semantic design is not difficult and just because habits were built over months or years does not mean it will take that long to change them. All it takes is the ability to change one's way of thinking. Rather than thinking, "What tag can I use to achieve the formatting I want", try thinking,
      "What tag can I use that accurately describes its content".

      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ !

      b) http://www.css4you.de/wslayout1/index.html

      gruss

      --
      no strict;
      no warnings;
      Der natürliche Feind der Festplatte ist der Teppich, der sich gerne mal elektrisch aufläd und der Festplatte eine wischt.
      Kluge Leute sind auch nur Menschen.
    4. Hi,

      height ist für TDs gar nicht vorgesehen:
      Zitat: "Anwendbar auf: Alle außer nichtersetzende Inlineelemente, Tabellenspalten und Spaltengruppen"

      Und was haben diese beiden Zeilen miteinander zu tun?
      Nichts.

      td ist keine Tabellenspalte (das wäre z.B. col - display: table-column), keine Spaltengruppe (das wäre colgroup - display:table-column-group). Und ein inline-Element (display:inline) ist td sowieso nicht.
      td ist ein Tabellenzellen-Elememnt (display:table-cell).

      Demzufolge gilt die Einschränkung für height _NICHT_ für td.

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      Schreinerei Waechter
      Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      1. Moinsen,

        height ist für TDs gar nicht vorgesehen:
        Zitat: "Anwendbar auf: Alle außer nichtersetzende Inlineelemente, Tabellenspalten und Spaltengruppen"

        Und was haben diese beiden Zeilen miteinander zu tun?
        Nichts.

        Rhetorische Fragen helfen dem Fragesteller ungemein.

        td ist keine Tabellenspalte (das wäre z.B. col - display: table-column), keine Spaltengruppe (das wäre colgroup - display:table-column-group). Und ein inline-Element (display:inline) ist td sowieso nicht.
        td ist ein Tabellenzellen-Elememnt (display:table-cell).

        Danke für die Belehrung. Ich hab mir schändlicherweise nicht die Müghe gemacht, das Zitat zu kürzen. Ich hielt TD in der Tat für eine Spalte. Mit TR, TH und TABLE werden Spalten jedenfalls nicht definiert.

        Demzufolge gilt die Einschränkung für height _NICHT_ für td.

        Danke, aber demzufolge müsste height also auf TDs angewendet werden können und funktionieren. Der Threadstarter wäre über konkrete Hilfe sicher dankbar.

        --
        cu,
        Maz
  2. ich habe folgendes Problem: Firefox und andere Browser zeigen mir das Layout richtig an, aber der IE mal wieder nicht.. Kann mir da irgendjemand weiterhelfen?

    Vielleicht kannst Du dem IE beim weiterhelfen, indem Du ihm die Höhe der zweiten Tabellenzeile vorrechnest:

    .banner { height:25%; }

    .menu { height:75%; }

    table{ height:100%; }

    hth Robert

    1. Vielleicht kannst Du dem IE beim weiterhelfen, indem Du ihm die Höhe der zweiten Tabellenzeile vorrechnest:

      .banner { height:25%; }
      .menu { height:75%; }
      table{ height:100%; }

      Danke für den Vorschlag, aber das mit dem Prozent war etwas unglücklich gewählt, denn es sollte 130px sein. Und da wird es schwierig etwas weiteres fortzugeben...

      Auch mit dem Attribut table-layout:fixed konnte ich keine Verbesserung bewirken. Aber wie gesagt, ist nur beim sh** IE !!