Christoph Becker: Falsche CSS-Darstellung im IE 6?

Hallo!

Ich übe gerade den Umgang mit CSS und habe dabei begonnen das Gästebuch meiner Homepage (www.ChristophBecker.de.hm) neu mit CSS zu gestalten.Ich teste meine Seiten immer unter dem IE6 und dem aktuellen Firefox (1.0.7).

Nun habe ich festgestellt, dass der IE die CSS-Attribute nicht komplett erkennt/interpretiert. Wie kann man das ändern? Im Firefox werden Sie so angezeigt, wie es in SelfHTML beschrieben ist. Zur Sicherheit habe ich den XHTML-Code und die CSS-Datei validiern lassen. Beides ist valide.

Damit man nicht so viel Code durchsehen muss, habe ich den Code auf die fehlerhaften Stellen reduziert. Hier ist er:

design-test.css:
.square {
  height: 50px;
  border: solid thin #000000;
  }

.autosquare {
  height: auto;
  border: solid thin #000000;
  }

css-test.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
  <title>css-test</title>
  <link rel="stylesheet" type="text/css" href="design-test.css"/>
</head>
<body>
  <table>
  <tr>
  <td class="square">hallo</td>
  <td class="autosquare" rowspan="2">hallo<br/>hallo<br/>hallo<br/>
  hallo<br/>hallo<br/>hallo<br/>hallo<br/>hallo<br/>hallo<br/>
  hallo<br/>hallo<br/>hallo<br/>hallo</td>
  </tr><tr>
  <td class="autosquare">text</td>
  </tr>
  </table>
</body>
</html>

Der Fehler ist nun folgender:
Im IE wird die Höhenangabe der linken oberen Zelle ignoriert. Im  Firefox wird die Zelle korrekt angezeigt.

Den Fehler kann man auch im Gästebuch selbst anschauen:
http://christophbecker.united-systems.org/new/guestbook.php

  1. hi,

    Ich übe gerade den Umgang mit CSS und habe dabei begonnen das Gästebuch meiner Homepage (www.ChristophBecker.de.hm) neu mit CSS zu gestalten.

    Dabei setzt du offenbar immer noch auf Tabellen - warum?

    Gerade Tabellenformatierung ist, insbesondere aber nicht nur, was Zellengrößen angeht, browserübergreifend auch kein leichtes Thema.

    Also mache doch den Sch(r|n)itt konsequent, und löse dich von Layouttabellen - schreibe strukturell sinnvolleres HTML, welches die Inhalte logisch auszeichnet, und formatiere dieses anschließend wie gewünscht mit CSS.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hallo!

      Also mache doch den Sch(r|n)itt konsequent, und löse dich von Layouttabellen - schreibe strukturell sinnvolleres HTML, welches die Inhalte logisch auszeichnet, und formatiere dieses anschließend wie gewünscht mit CSS.

      Mit welchen HTML-Tags kann man denn blinde Tabellen ersetzen?
      Einfache Listen mit ol und ul reichen dafür nicht, da jede blinde Tabelle auf meiner Seite (die gerade irgendwie nicht erreichbar ist) mindestens 2 Spalten an Infomrationen anzeigen muss.
      Edit: Hab gerade gelesen, dass das mit <div>-Bereichen geht.

      Außerdem muss ich bestimmte Zellen verbinden können oder es muss so aussehen, als ob sie verbunden wären. Also so wie in dem Code den ich vorher gezeigt habe. Geht sowas ohne Tabelle? Wenn ja, wie?

      MfG

      Christoph Becker

      1. hi,

        Mit welchen HTML-Tags kann man denn blinde Tabellen ersetzen?

        Erst mal ist interessant, welche Art von Daten du überhaupt hast.
        Vielleicht ist eine Tabelle ja sogar angebracht - nur anhand deines beispiels konnte man das nicht beurteilen (hallo - hallo - hallo ... sind keine sonderlich sinnvollen Daten).

        Edit: Hab gerade gelesen, dass das mit <div>-Bereichen geht.

        Nein, Div ist ein bedeutungsloses Element.
        Zeichne bitte _nie_ Daten damit aus - divs sind zum Gruppieren von Elementen gedacht.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Hallo!

          Erst mal ist interessant, welche Art von Daten du überhaupt hast.
          Vielleicht ist eine Tabelle ja sogar angebracht - nur anhand deines beispiels konnte man das nicht beurteilen (hallo - hallo - hallo ... sind keine sonderlich sinnvollen Daten).

          Also die meisten Informationen auf meiner Seite sind 2-spaltig, so z.B.
          Software      Download-Link
          4 Gewinnt     4gewinnt.zip
          Terminplaner  tplaner.zip
          ...
          Hier kann ich das mit den Tags dt und dd machen wie du das auch deiner Seite (http://wazgnuks.net/archiv) gemachst hast.

          Nur das Gästebuch hat eine andere Tabelle (Siehe Link):
          http://www40.brinkster.com/hpcbtest/gb.htm
          => Da meine Seite gerade nicht geht, hab ich die Oberfläche des Gästebuchs schnell auf einen neu erstellten Webspace kopiert. Somit ist es ohne Funktionalität. Aber ansonsten soll so mein neues Gästebuch aussehen. Also bleibt nur noch die Frage, wie man so ein Design ohne Tabelle darstellen kann.
          Wenn das...
          geht: Wie geht das?
          nicht geht: Wie beseitige ich das Problem mit der Zellenhöhe bei der Anzeige im IE?

          MfG

          Christoph Becker

          1. hi,

            Nur das Gästebuch hat eine andere Tabelle (Siehe Link):
            http://www40.brinkster.com/hpcbtest/gb.htm
            => Da meine Seite gerade nicht geht, hab ich die Oberfläche des Gästebuchs schnell auf einen neu erstellten Webspace kopiert. Somit ist es ohne Funktionalität. Aber ansonsten soll so mein neues Gästebuch aussehen. Also bleibt nur noch die Frage, wie man so ein Design ohne Tabelle darstellen kann.

            Einträge generell als Liste, und die einzelnen "Bestandteile" sinnvoll auszeichnen und beispielsweise floaten lassen.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. Hallo!

              Einträge generell als Liste, und die einzelnen "Bestandteile" sinnvoll auszeichnen und beispielsweise floaten lassen.

              Hab mir gerade den Artikel in SelfHTML zu "Positionierung und Anzeige von Elementen" angesehen, da darin was von float stand. CSS stellt ja damit sämtliche Gestaltungsmöglichkeiten von (reinem) HTML weit in den Schatten! Ich werde mich damit nun erst mal auseinandersetzen um es dann gegen die Tabelle zu ersetzen.

              Herzlichen Dank für die große Hilfe.

              MfG

              Christoph Becker