olaf: display table IE

Hallo

ich würde gerne eine Tabelle css generieren
display:table display:table-row display:table-cell
wie es im Beispiel http://de.selfhtml.org/css/eigenschaften/anzeige/display2.htm
dargestellt ist.
Dieses Beispiel wird im IE einwandfrei dargestellt, wenn ich jedoch den Quelltext
in eine eigene Datei kopiere (z.B. test.html / eins zu eins ohne eigenen Quelltext)
und diese im gleichen Browser/neuer Tab ausführe wird das css nicht dargestellt.
Das kann ich mir nicht erklären und hoffe auf Eure Hilfe bzw. Erklärungen

Vielen Dank Olaf

  1. Om nah hoo pez nyeetz, olaf!

    ich würde gerne eine Tabelle css generieren

    Unter Umständen könntest du auch eine Tabelle verwenden.

    Das kann ich mir nicht erklären und hoffe auf Eure Hilfe bzw. Erklärungen

    welcher IE?

    dieser Quelltext?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
    <html><head>  
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
    <title>display</title>  
    <style type="text/css">  
    div.table { display:table; border-collapse:collapse; }  
    div.tr { display:table-row; }  
    div.td { display:table-cell; border:thin solid red; padding:5px; }  
    </style>  
    </head><body>  
      
    <div class="table">  
     <div class="tr">  
      <div class="td">ich</div>  
      <div class="td">bin</div>  
      <div class="td">eine</div>  
      <div class="td">Tabelle</div>  
     </div>  
    </div>  
      
    <p><a href="../positionierung.htm#display2">zur&uuml;ck</a></p>  
    </body>  
    </html>
    

    Dieser Quelltext ist nicht mehr ganz up to date. Nimm mal diesen. Obwohl das sicher nicht die Fehlerquelle ist.

    <!doctype html>  
    <html><head>  
    <meta charset="utf-8">  
    <title>display</title>  
    <style type="text/css">  
    div.table { display:table; border-collapse:collapse; }  
    div.tr { display:table-row; }  
    div.td { display:table-cell; border:thin solid red; padding:5px; }  
    </style>  
    </head><body>  
      
    <div class="table">  
     <div class="tr">  
      <div class="td">ich</div>  
      <div class="td">bin</div>  
      <div class="td">eine</div>  
      <div class="td">Tabelle</div>  
     </div>  
    </div>  
      
    <p><a href="../positionierung.htm#display2">zurück</a></p>  
    </body>  
    </html>
    

    Achte darauf, dass du die Datei auch als "utf-8 ohne BOM" speicherst.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Canna und Cannabis.

    1. Om nah hoo pez nyeetz, Matthias!

      Dieser Quelltext ist nicht mehr ganz up to date. Nimm mal diesen. Obwohl das sicher nicht die Fehlerquelle ist.

      <!doctype html>

      <html><head>
      <meta charset="utf-8">
      <title>display</title>
      <style type="text/css">
      div.table { display:table; border-collapse:collapse; }
      div.tr { display:table-row; }
      div.td { display:table-cell; border:thin solid red; padding:5px; }
      </style>
      </head><body>

      <div class="table">
      <div class="tr">
        <div class="td">ich</div>
        <div class="td">bin</div>
        <div class="td">eine</div>
        <div class="td">Tabelle</div>
      </div>
      </div>

      <p><a href="../positionierung.htm#display2">zurück</a></p>
      </body>
      </html>

      Mindestens das DIV Element mit der Klasse "tr" kann man sich sparen.  
      Und wie war das noch gleich mit präsentationsbezogenen Klassennamen ...!? :-P  
        
      Gruß Gunther
      
      1. Euch auch Frieden im Herzen und Glück auf Euren Wegen

        vielen Dank für Eure Antworten

        am Quelltext liegt es nicht !
        auch die Version von Günther hat den gleichen Darstellungsfehler.

        Die Version vom IE ist auch unerheblich, da die Darstellung in
        verschiedenen Tabs des IE unterschiedlich ist.

        Kann es am Server liegen das CSS nicht richtig ausgeführt wird?
        http://de.selfhtml.org/ = Darstellung OK
        localhost (Apachefriends) = Darstellung OK
        anderer Server = fehlerhafte Darstellung !!!

        wie gesagt immer der gleiche Quellcode und derselbe Browser! IE 8

        1. Om nah hoo pez nyeetz, olaf!

          wie gesagt immer der gleiche Quellcode und derselbe Browser! IE 8

          Manche Seiten werden vom IE in einem Kompatibilitätsmodus dargestellt. Wenn der Server etwa den header X-UA-Compatible: IE=EmulateIE7 sendet, scheitert die Darstellung weil der IE7 display: table-* nicht kennt.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Hund und Hundertwasser.

      2. Hallo,

        <!doctype html>

        <html><head>
        <meta charset="utf-8">
        <title>display</title>
        <style type="text/css">
        div.table { display:table; border-collapse:collapse; }
        div.tr { display:table-row; }
        div.td { display:table-cell; border:thin solid red; padding:5px; }
        </style>
        </head><body>

        <div class="table">
        <div class="tr">
          <div class="td">ich</div>
          <div class="td">bin</div>
          <div class="td">eine</div>
          <div class="td">Tabelle</div>
        </div>
        </div>

        <p><a href="../positionierung.htm#display2">zurück</a></p>
        </body>
        </html>

          
        hmm hab grad den alten in in ie 9 getestet kein problem und auch der neuere mit und ohne bom kein problem  
          
        
        > Mindestens das DIV Element mit der Klasse "tr" kann man sich sparen.  
        > Und wie war das noch gleich mit präsentationsbezogenen Klassennamen ...!? :-P  
          
        tr, und td sagen doch noch nichts über das aussehen aus, sondern vielmehr, dass sie die semantik einer Tabellenzeile bzw Tabellezelle haben und deswegen irgenwie dahingehend formatiert werden sollen.  
          
        Semantisch ist das sicherlich nicht das preisverdächtigste Dokument und man sollte erstmal da anfangen zu disktutieren bevor man an die Klassennamen rangeht  
        
        >   
        > Gruß Gunther  
        
        martachen
        
        1. Om nah hoo pez nyeetz, martachen!

          Semantisch ist das sicherlich nicht das preisverdächtigste Dokument und man sollte erstmal da anfangen zu disktutieren bevor man an die Klassennamen rangeht

          Das musst du im Zusammenhang sehen: Diese Dokument soll demonstrieren, dass sich beliebige Elemente wie Tabellen darstellen lassen. Nicht mehr, nicht weniger und vor allem stellt es keinen konkreten Anwendungsfall dar.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kot und Kotelett.

        2. Hallo!

          Das war eigentlich ein "Insider" für Matthias ...! ;-)
          Aber wo du nun schon darauf eingegangen bist ...

          tr, und td sagen doch noch nichts über das aussehen aus,

          Nicht? Und "was" macht sie denn zu TRs und TDs? Nur deine entsprechende Formatierung im CSS, und somit sind die Klassennamen sehrwohl präsentationsbezogen. Bei einer anderen Viewportgröße könnten die jeweiligen Elemente ja bspw. auch gefloatet, oder per display:inline-block formatiert sein.

          sondern vielmehr, dass sie die semantik einer Tabellenzeile bzw Tabellezelle haben und deswegen irgenwie dahingehend formatiert werden sollen.

          Also nach meinem Verständnis bezieht sich Semantik ausschließlich auf die Elemente im Markup.
          Das heißt, wenn du tabellarische Daten hast, solltest du auch TABLE & Co. Elemente verwenden. Wenn du gewisse Elemente "nur" entsprechend anordnen/ anzeigen lassen willst, dann ist das eine reine Frage der Präsentation und nicht der Semantik.

          Davon abgesehen erstreckt sich imho die Semantik von Tabellenzeilen und Tabellenzellen darauf, dass es notwendigerweise vorhandene Elemente einer Tabelle sind, deren Bedeutung ggf. aus einer entsprechenden Zeilen- oder Spaltenüberschrift (näher) hervorgeht - immer vorausgesetzt es handelt sich dabei auch wirklich um tabellarische Daten.

          Gruß Gunther

          1. Hallo,

            Hallo!

            Das war eigentlich ein "Insider" für Matthias ...! ;-)
            Aber wo du nun schon darauf eingegangen bist ...

            tr, und td sagen doch noch nichts über das aussehen aus,
            Nicht? Und "was" macht sie denn zu TRs und TDs? Nur deine entsprechende Formatierung im CSS, und somit sind die Klassennamen sehrwohl präsentationsbezogen. Bei einer anderen Viewportgröße könnten die jeweiligen Elemente ja bspw. auch gefloatet, oder per display:inline-block formatiert sein.

            sie werden zu trs und tds, weil sie elemnte einer Tabelle  (in gewisserweise Bausteine) sind. das heißt ich zeichne die divs mit diesen klassennamen als solche bausteine aus.

            Gut Tabellen sind vermutlich eine schwierige Grunddlage für Präsentationsbezogen und semantisch bezogen zu unterscheiden, da in der semantik tabellenzeile schon eine gewisse "Präsentation" impliziert wird. aber in dem Namen tr steckt keine konkrete Präsentation bei "roteTabellenZeile" wär das schon was anderes. in tr steckt erstmal nur drinne es ist eine Tabellenzeile (also semantisch eine Einheit von Daten, meist in Form mehrerer zellen, die in einer Beziehung zu einander stehen), damit hab ich eine Gruppierung der Kindelemente udn noch nichts über die Präsentation gesagt. ich könnt bei kleiner viewportgröße auch sagen, stelle mit alle kindelemente dieser gruppe untereinander dar, trotzdem werden immernoch daten repräsentiert, die eine Tabellenzeile sind, die zellen bestehen ja immer noch aus in beziehung zueinander stehenden daten.

            sondern vielmehr, dass sie die semantik einer Tabellenzeile bzw Tabellezelle haben und deswegen irgenwie dahingehend formatiert werden sollen.
            Also nach meinem Verständnis bezieht sich Semantik ausschließlich auf die Elemente im Markup.
            Das heißt, wenn du tabellarische Daten hast, solltest du auch TABLE & Co. Elemente verwenden. Wenn du gewisse Elemente "nur" entsprechend anordnen/ anzeigen lassen willst, dann ist das eine reine Frage der Präsentation und nicht der Semantik.

            genau deswegen frage ich mich shcon immmer warum es diese eigenschaften für display gibt, bzw auch warum es häufig auch für echte Tabellen missbraucht wird  (soweit gehts mit "Tabellen sind übel", dass man schon solche Konstrukte für echte Tabellen nimmt)

            in diesem Beispiel (ohne Anwendungsfall) wird es mir nicht ersichtlich warum man das über divs macht, wäre dies kein codebeispieldokument, hätte ich den user eher gefragt warum er keine tabelle nimmt, statt auf präsentationsbezogene namen hinzuweisen. der fehlende Anwedungsfall macht es schwieriger einen aussagekräftigeren klassennamen zu nehmen. Aber Trotzdem ist es meiner Meinung nach nicht präsentationsbezogen  den divs die Klassen tr und td zu geben. Sondern steckt da vielmehr die Aussage dahinter, dass diese ausgezeichneten divs das Verhalten einer Tabellenzeile bzw -zelle haben sollen

            Davon abgesehen erstreckt sich imho die Semantik von Tabellenzeilen und Tabellenzellen darauf, dass es notwendigerweise vorhandene Elemente einer Tabelle sind, deren Bedeutung ggf. aus einer entsprechenden Zeilen- oder Spaltenüberschrift (näher) hervorgeht - immer vorausgesetzt es handelt sich dabei auch wirklich um tabellarische Daten.

            Gruß Gunther

            martachen

            1. Hallo!

              tr, und td sagen doch noch nichts über das aussehen aus,
              Nicht? Und "was" macht sie denn zu TRs und TDs? Nur deine entsprechende Formatierung im CSS, und somit sind die Klassennamen sehrwohl präsentationsbezogen. Bei einer anderen Viewportgröße könnten die jeweiligen Elemente ja bspw. auch gefloatet, oder per display:inline-block formatiert sein.

              sie werden zu trs und tds, weil sie elemnte einer Tabelle  (in gewisserweise Bausteine) sind. das heißt ich zeichne die divs mit diesen klassennamen als solche bausteine aus.

              Hmmm ..., machst du dann aber nicht genau das, was du weiter unten:"warum es häufig auch für echte Tabellen missbraucht wird" selber bemängelst!?

              Gut Tabellen sind vermutlich eine schwierige Grunddlage für Präsentationsbezogen und semantisch bezogen zu unterscheiden, da in der semantik tabellenzeile schon eine gewisse "Präsentation" impliziert wird. aber in dem Namen tr steckt keine konkrete Präsentation bei "roteTabellenZeile" wär das schon was anderes. in tr steckt erstmal nur drinne es ist eine Tabellenzeile (also semantisch eine Einheit von Daten, meist in Form mehrerer zellen, die in einer Beziehung zu einander stehen), damit hab ich eine Gruppierung der Kindelemente udn noch nichts über die Präsentation gesagt. ich könnt bei kleiner viewportgröße auch sagen, stelle mit alle kindelemente dieser gruppe untereinander dar, trotzdem werden immernoch daten repräsentiert, die eine Tabellenzeile sind, die zellen bestehen ja immer noch aus in beziehung zueinander stehenden daten.

              Du redest (überwiegend) von HTML Elementen - Klassennamen in Form von Elementnamen sind keinen Deut besser, als präsentationsbezogene Klassennamen.

              sondern vielmehr, dass sie die semantik einer Tabellenzeile bzw Tabellezelle haben und deswegen irgenwie dahingehend formatiert werden sollen.
              Also nach meinem Verständnis bezieht sich Semantik ausschließlich auf die Elemente im Markup.
              Das heißt, wenn du tabellarische Daten hast, solltest du auch TABLE & Co. Elemente verwenden. Wenn du gewisse Elemente "nur" entsprechend anordnen/ anzeigen lassen willst, dann ist das eine reine Frage der Präsentation und nicht der Semantik.

              genau deswegen frage ich mich shcon immmer warum es diese eigenschaften für display gibt,

              Weil sie "nützlich" sind. ;-)

              bzw auch warum es häufig auch für echte Tabellen missbraucht wird  (soweit gehts mit "Tabellen sind übel", dass man schon solche Konstrukte für echte Tabellen nimmt)

              Was, wie bereits erwähnt, verkehrt ist.

              in diesem Beispiel (ohne Anwendungsfall) wird es mir nicht ersichtlich warum man das über divs macht, wäre dies kein codebeispieldokument, hätte ich den user eher gefragt warum er keine tabelle nimmt, statt auf präsentationsbezogene namen hinzuweisen. der fehlende Anwedungsfall macht es schwieriger einen aussagekräftigeren klassennamen zu nehmen. Aber Trotzdem ist es meiner Meinung nach nicht präsentationsbezogen  den divs die Klassen tr und td zu geben. Sondern steckt da vielmehr die Aussage dahinter, dass diese ausgezeichneten divs das Verhalten einer Tabellenzeile bzw -zelle haben sollen

              Und wenn sie das nicht mehr haben sollen (siehe bereits geschildertes Beispiel)?

              Gruß Gunther