display table IE
olaf
- css
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
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ü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
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
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
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
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
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
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
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
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