nicht angemeldet
MudGuard
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Hallo, ich habe ein dickes Problem mit den Selektorregeln bei CSS.
Beispiel:
Ich möchte eine Tabelle mit der Klasse "cpres" stylen.
Dazu sollen gleichzeitig auch die th- und td-Elemente gestylt werden.
table.cpres {
border: 0;
margin: 0px;
padding: 0px;
}
table.cpres > th, table.cpres > td {
border: #aa5a5a 1px solid;
background: #edbda5;
padding 4px;
}
table.cpres > td {
background: #ffebe1;
}
Wenn ich jetzt den HTML-Code so aufbaue,
<table class="cpres">
<tr><th>Hallo</th></tr>
<tr><td>Welt!</td></tr>
</table>
werden die Zellen einfach nicht gestylt.
Wenn ich diese > weglasse, so stylte er aber JEDE Tabellenzelle,
egal ob diese im Elternelement table.cpres ist oder nicht!
Und das darf eben nicht passieren!!
Wie muss ich das nun in CSS bewekstelligen?
Vielen Dank für Eure Hilfe!
lg
hi,
» table.cpres > td {
> background: #ffebe1;
> }
<table class="cpres">
<tr></tr>
</table>
Ungetestet, aber versuche mal über tr zu td zu kommen.
~~~css
table.cpres > tr > td {
background: #ffebe1;
}
Wenn das ganze auch IE < 7 tauglich sein soll, könntest du auch mit Klassen für die betreffenden Zeilen arbeiten.
mfg
Hallo, siehe mein Post, den ich als Antwort auf Beat's Post geschrieben habe. ^^
Ich knocke IE6 aus, da ich keine Lust habe mich mit diesen Mist rumzuärgern.
table.cpres {
border: 0;
margin: 0px;
padding: 0px;
}table.cpres > th, table.cpres > td {
du gehst von der irrigen Annahme aus, dass
<table><td>
valider Code sei.
border: #aa5a5a 1px solid;
background: #edbda5;
padding 4px;
}
table.cpres > td {
gleicher Fehler.
background: #ffebe1;
}
>
> Wenn ich jetzt den HTML-Code so aufbaue,
>
> ~~~html
<table class="cpres">
> <tr><th>Hallo</th></tr>
> <tr><td>Welt!</td></tr>
> </table>
werden die Zellen einfach nicht gestylt.
Wenn ich diese > weglasse, so stylte er aber JEDE Tabellenzelle,
egal ob diese im Elternelement table.cpres ist oder nicht!
Und das darf eben nicht passieren!!Wie muss ich das nun in CSS bewekstelligen?
Verpasse deinen Layoutzellen Klassen und spreche sie direkt an.
mfg Beat
du gehst von der irrigen Annahme aus, dass
<table><td>
valider Code sei.
-__________-
Tut mir Leid, dass ich euch mit meiner unendlichen Dummheit genervt habe...
Aber so kanns ja nicht gehen! th und td sind keine Kindelemente von table.cpres sondern von table.cpres > tr, richtig?
Daraus folgt dann folgender CSS-Code:
table.cpres > tr > th, table.cpres > tr > td { /* bla definitionen bla */}
Richtig?
PS: Ich möchte es gerade vermeiden die Zellen direkt per Klasse anzusprechen, weil mir das sonst zu unübersichtlich wird...
Hi,
Aber so kanns ja nicht gehen! th und td sind keine Kindelemente von table.cpres sondern von table.cpres > tr, richtig?
Für HTML gilt: td ist Kind von tr, Enkel von tbody/thead/tbody, Urenkel von table.
cu,
Andreas
Für HTML gilt: td ist Kind von tr, Enkel von tbody/thead/tbody, Urenkel von table.
Beim explitziten und impliziten hinzufügen von z.B. tbody gibt es unterschiede zwischen HTML und XHTML die sich auch in den zu verwendenden CSS-Selektoren wiederspiegeln.
Beim explitziten und impliziten hinzufügen von z.B. tbody gibt es
unterschiede zwischen HTML und XHTML die sich auch in den zu verwendenden
CSS-Selektoren wiederspiegeln.
Gut zu wissen. Ich verwende natürlich XHTML 1.1.
Wie verhält es sich dort mit den CSS-Selektoren?
Auch wären Links hilfreich, wo soetwas dokumentiert ist.
lg
@@BloodySword:
nuqneH
Ich verwende natürlich XHTML 1.1.
Warum? Das ist nicht natürlich. Es gibt sehr wenige Gründe für XHTML 1.1, aber etliche dagegen. Verwende besser XHTML 1.0 Strict.
Wie verhält es sich dort mit den CSS-Selektoren?
Genauso wie bei XHTML 1.0: Es hängt davon ab, ob das Dokument als Tagsoup (text/html) oder XML (application/xhtml+xml o.ä.) verarbeitet wird.
Meine Empfehlung: immer 'tbody'-Elemente verwenden. dann treten solche Probleme gar nicht erst auf.
Auch wären Links hilfreich, wo soetwas dokumentiert ist.
In den DTDs von HTML 4.01 und XHTML 1.0/1.1.
Qapla'
Hatte schon gemerkt, dass XHTML1.1 eigenartig ist. Habe den Doctype nun geändert:
<?xml version="1.0" encoding="UTF-8"?>
<!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">
Die DTDs sehen sehr maschinell aus, da wäre es mir lieber, wenn es da eine lesbare Dokumentation über die CSS Selectoren geben würde.
Im Quelltext habe ich jetzt kein <tbody>. Ist das dann nicht mehr Standardkonform? Also W3C validiert meine Dokumente.
In CSS mache ich das so:
table.cpres > tbody > tr > td { /* ... */ }
@@BloodySword:
nuqneH
<?xml version="1.0" encoding="UTF-8"?>
Das versetzt IE 6 in den Quirksmodus. Lass die überflüssige XML-Deklaration weg!
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Das passt nicht mit deinem Text „Hallo Welt“ zusammen. Ist die Seite deutsch oder englisch?
Im Quelltext habe ich jetzt kein <tbody>. Ist das dann nicht mehr Standardkonform?
Doch, das ist es. [XHTML10-DTD]:
<!ELEMENT table
(caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>
Das heißt, 'table' darf sowohl 'tbody'-Elemente als auch 'tr'-Elemente als Kinder enthalten.
In HTML 4.01 [HTML401-DTD] gilt jedoch
<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
'tr' ist niemals Kind von 'table'. Allerdings sind Start-Tag und End-Tag von 'tbody' optional:
<!ELEMENT TBODY O O (TR)+ -- table body -->
Der XHTML-Code
<table>
<tr>
<td>foo</td>
</tr>
</table>
erzeugt also bei Verarbeitung als HTML den Elementbaum
table
└tbody
└tr
└td
bei Verarbeitung als XML jedoch
table
└tr
└td
Soll der XHTML-Code bei Verarbeitung als HTML und als XML denselben Elementbaum erzeugen, dann ist 'tbody' zu verwenden:
<table>
<tbody>
<tr>
<td>foo</td>
</tr>
</tbody>
</table>
In CSS mache ich das so:
table.cpres > tbody > tr > td { /* ... */ }[/code]
Wozu Kindselektor, wenn es doch auch der Nachfahrenselektor tut?
Qapla'
@@BloodySword:
nuqneH
Was willst du mir damit immer sagen? ;)
<?xml version="1.0" encoding="UTF-8"?>
Das versetzt IE 6 in den Quirksmodus. Lass die überflüssige XML-Deklaration weg!
IE6 wird von mir ausgeklammert. Mit dem Mist will ich mich nicht rumärgern.
Dennoch habe ich die XML-Deklaration jetzt entfernt.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Das passt nicht mit deinem Text „Hallo Welt“ zusammen. Ist die Seite deutsch oder englisch?
Ups, das ist mir gar nicht aufgefallen. lang="en" gelöscht.
Im Quelltext habe ich jetzt kein <tbody>. Ist das dann nicht mehr Standardkonform?
Doch, das ist es. [XHTML10-DTD]:
Ah gut, jetzt verstehe ich ein bisschen die Definitionen in den DTDs.
Soll der XHTML-Code bei Verarbeitung als HTML und als XML denselben Elementbaum erzeugen, dann ist 'tbody' zu verwenden:
<table>
<tbody>
<tr>
<td>foo</td>
</tr>
</tbody>
</table>
Das bedeutet, ein Browser, der XHTML nicht unterstützt wie IE unter Version 7 wird meine CSS-Kind-Selektion nicht interpretieren, da er kein tbody im DOM interpretiert, richtig?
> > In CSS mache ich das so:
> > table.cpres > tbody > tr > td { /\* ... \*/ }[/code]
>
> Wozu Kindselektor, [wenn es doch auch der Nachfahrenselektor tut](https://forum.selfhtml.org/?t=190874&m=1272529)?
Ganz einfach: Weil ich verhindern will, dass andere td's auch so gestylt werden, wie deine Glaskugel v2.0 herausfand. Aber mit Layouting hat es nichts zu tun. Das mache ich mit DIV's.
http://intensivstation.ch/files/templates/2/template-1-3col.html
lg
Was willst du mir damit immer sagen? ;)
Das bedeutet, ein Browser, der XHTML nicht unterstützt wie IE unter Version 7 wird meine CSS-Kind-Selektion nicht interpretieren, da er kein tbody im DOM interpretiert, richtig?
Nein, das kommt darauf an ob das dokument als XML verarbeitet wird oder als HTML (oder gar als "undefinierte Wurst" aka Tagsoup) - wird das Dokument als XML interpretiert bleibt es, wie es ist - in den anderen fällen werden implizit Elemente hinzugefügt, geöffnet oder geschlossen und der generierte Quelltext weicht vom ausgelieferten ab - deine Selektoren greifen dann ggf. nicht mehr.
Nein, das kommt darauf an ob das dokument als XML verarbeitet wird oder als HTML
(oder gar als "undefinierte Wurst" aka Tagsoup)
Mullah Nasr'Eddin fragt:
Du meinst die Suppe von der Suppe...
mfg Beat
Was willst du mir damit immer sagen? ;)
Lol, was für ein Script...
Das bedeutet, ein Browser, der XHTML nicht unterstützt wie IE unter Version 7 wird meine CSS-Kind-Selektion nicht interpretieren, da er kein tbody im DOM interpretiert, richtig?
Nein, das kommt darauf an ob das dokument als XML verarbeitet wird oder als HTML (oder gar als "undefinierte Wurst" aka Tagsoup) - wird das Dokument als XML interpretiert bleibt es, wie es ist - in den anderen fällen werden implizit Elemente hinzugefügt, geöffnet oder geschlossen und der generierte Quelltext weicht vom ausgelieferten ab - deine Selektoren greifen dann ggf. nicht mehr.
Solange man aber den richtigen Doctype angibt, sollte das Dokument doch als XHTML verarbeitet werden. Das heißt, der fügt die TBODYs im DOM automatisch hinzu, richtig?
@@BloodySword:
nuqneH
Solange man aber den richtigen Doctype angibt, sollte das Dokument doch als XHTML verarbeitet werden.
Nicht im IE.
Das heißt, der fügt die TBODYs im DOM automatisch hinzu, richtig?
Qapla'
@@suit:
nuqneH
als HTML (oder gar als "undefinierte Wurst" aka Tagsoup)
Der Unterschied wäre welcher?
Qapla'
Der Unterschied wäre welcher?
Dass es in HTML Regeln (von der DTD abhängig) gibt nach denen Elemente explizit oder implizit geschlossen werden - nach diesen hat sich der Browser zu richten.
Wenn keine DTD vorhanden ist oder nicht ersichtlich ist, dass es sich überhaupt um HTML handelt, können diese regeln nicht angewendet werden.
Ist z.B. eine HTML 4.01 DTD vorhanden, weiß der browser dass folgende Zeichenkette <p/foo/ gleichbedeutend zu <p>foo</p> ist - ist eine XHTML 1.0 DTD vorhanden weiß der Browser, dass die zeichenkette <p/foo/ ein Syntaxfehler ist. Ist keine DTD vorhanden, muss er rätselraten.
Nachtrag: mir ist klar, dass es in der Praxis keinen Unterschied gibt und die Fehlerkorrektur mit dem sinnvollen Parsen einhergeht (bzw. die DTD überhaupt nicht gelesen wird sondern nur das pure vorhandensein einer DTD irgend einen Render-Modus anwirft) - darum kann man nur von 1:1 Ergebnissen ausgehen, wenn der Code auch wirklich syntaktisch einfach gehalten ist und möglichst auf SGML kurzschreibweisen verzichtet die ohnehin nur von wenigen Browsern korrekt interpretiert werden.
Dass selbst mordernste Browser immernoch nichts mit den DTDs machen, erschüttert mich...
Wie lange es wohl noch dauern wird, bis die Browser die Dokumenttypen RICHTIG rendern?
Wie lange es wohl noch dauern wird, bis die Browser die Dokumenttypen RICHTIG rendern?
Die DTD hat mit dem Rendern/Reflow ansich nicht viel zu tun - sie gibt nur die Syntax für das Dokument vor.
Wie lange es wohl noch dauern wird, bis die Browser die Dokumenttypen RICHTIG rendern?
Die DTD hat mit dem Rendern/Reflow ansich nicht viel zu tun - sie gibt nur die Syntax für das Dokument vor.
Und sie soll helfen diese schneller zu parsen, richtig?
Weiß jemand, wann es so weit sein wird, dass die Browser nur noch streng nach den DTDs gehen?
Ich rede jetzt nicht vom IE xD.
Wie lange es wohl noch dauern wird, bis die Browser die Dokumenttypen RICHTIG rendern?
Die DTD hat mit dem Rendern/Reflow ansich nicht viel zu tun - sie gibt nur die Syntax für das Dokument vor.
Und sie soll helfen diese schneller zu parsen, richtig?
Weiß jemand, wann es so weit sein wird, dass die Browser nur noch streng nach den DTDs gehen?
Ich rede jetzt nicht vom IE xD.
Wahrscheinlich nie. HTML5 wird ganz ohne DTD auskommen.
Nur einige idealistische Browser werden das tun.
mfg Beat
Dann frage ich mich, was das Ganze mit den Standards soll, wenn sich eh keiner daran hält...
Ok bei Transitional ists ja ok, da ist das vorgesehen, dass das Ganze ein bisschen flexibeler angesehen wird. Aber Strict sollte Strict bleiben.
lg
Ok bei Transitional ists ja ok, da ist das vorgesehen, dass das Ganze ein bisschen flexibeler angesehen wird. Aber Strict sollte Strict bleiben.
Die ursprüngliche Idee war ja, sich von den HTML-Wurzeln zu trennen und XHTML 2.0 voranzutreiben - aber ein paar <del>faule</del><ins>schlaue</ins> Leute haben sich dann auf HTML 5 geeinigt. Mit einigen sehr sehr fragwürdigen Neuerungen.
embed z.B. wurde Standardisiert - nach dem Motto: wenn man's lange genug falsch macht, wirds irgendwann richtig.
Jetzt gibts object, embed, audio und video - obowohl ein ordentlich definiertes object gereicht hätte.
Das erinnert mich alles an das Hin und her mit DVD+R und DVD-R, sowie Blu-Ray und HD DVD.
Zum Glück griff bei Toshiba das Motto "Der klügere gibt nach.".
Das erinnert mich alles an das Hin und her mit DVD+R und DVD-R, sowie Blu-Ray und HD DVD.
Zum Glück griff bei Toshiba das Motto "Der klügere gibt nach.".
Geld regiert die Welt - und nachdem Google den Suchmaschinenmarkt kontrolliert und sich bewusst ist, dass 95% der Seiten im Netz nicht valide sind, Google Mozilla mit 85 Millionen Dollar unterstützt, die Mozilla Foundation maßgeblich an der Entwicklung von HTML 5 beteiligt war ist es ein klarer Schluss das man es unterstützt, Standards durchzudrücken, die es einem Amateur nachwievor erlauben, Webseiten zu erstellen. Mehr Webseiten = mehr Google Kunde = mehr Geld.
Wenn sich ein browser weigerte Aufgrund von Syntaxfehlern eine Seite zu rendern wären schnell mal weite teile des Internet "futsch". Und Google ist nunmal gut darin, invaliden Code trotzdem zu parsen.
Also das ist schon ziemlich heftig. Aber wenn ich die wäre, würde ich genauso handeln. Heute kann man ja selbst im Mittelstand gerade so überleben. Und nach der Bundestagswahl wird die Armut wohl noch größer werden...
@@BloodySword:
nuqneH
Weiß jemand, wann es so weit sein wird, dass die Browser nur noch streng nach den DTDs gehen?
Du willst, dass Browser invalide Dokumente nicht darstellen? Also den überwiegenden Teil der bestehenden Webseiten?
(Wenn XHTML als XML verarbeitet wird, zeigen die Browser solches Verhalten.)
Qapla'
(Wenn XHTML als XML verarbeitet wird, zeigen die Browser solches Verhalten.)
Jein - die DTD wird da in den meisten Fällen auch ignoriert - da interessierts nur, ob das Dokument wohlgeformt ist.
Firefox 3.5.5, folgendes Dokument ausgeliefert als application/xhtml+xml:
Funktioniert einwandfrei obwohl h1 innerhalb von a nicht erlaubt ist.
<?xml version="1.0"?>
<!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>
<title>xmltest</title>
</head>
<body>
<a href="/"><h1>fehler</h1></a>
</body>
</html>
Erzeugt einen Fehler, weil das title-Element nicht geschlossen ist (nicht wohlgeformt).
<?xml version="1.0"?>
<!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>
<title>xmltest
</head>
<body>
<a href="/"><h1>fehler</h1></a>
</body>
</html>
Quatsch, das will ich ganz und gar nicht. Dafür gibts doch immernoch den Quirks-Mode und die alten implementationen. ^^
@@BloodySword:
nuqneH
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Das passt nicht mit deinem Text „Hallo Welt“ zusammen. Ist die Seite deutsch oder englisch?
Ups, das ist mir gar nicht aufgefallen. lang="en" gelöscht.
Nicht @lang/@xml:lang löschen, sondern die richtige Sprache angeben. [LANG-WHY]
Qapla'
Oh, ich dachte das wäre im Moment noch nicht so wichtig. Aber es scheinen schon viele Anwendungen zu geben, die mit dem Attribut etwas anstellen. Dachte, das ist noch höchst experimentell. Danke für die Info :).
@@BloodySword:
nuqneH
Wenn ich diese > weglasse, so stylte er aber JEDE Tabellenzelle,
egal ob diese im Elternelement table.cpres ist oder nicht!
?? Dann machst du etwas falsch.
'table.cpres th, table.cpres td' selektiert nur Zellen einer Tabelle der Klasse "cpres", nicht jedoch Zellen anderer Tabellen.
Glaskugel: Du hattest doch nicht etwa 'table.cpres th, td' geschrieben?
Qapla'
'
table.cpres th, table.cpres td' selektiert nur Zellen einer Tabelle der Klasse "cpres", nicht jedoch Zellen anderer Tabellen.
Du denkst zu idealistisch!
mfg Beat
Glaskugel: Du hattest doch nicht etwa '
table.cpres th, td' geschrieben?
Glaskugel v2.0:
Du verwendest eine Layout-Tabelle in der sich noch andere Tabellen befinden können, die natürlich dann _nicht_ so aussehen sollen.
Du verwendest eine Layout-Tabelle in der sich noch andere Tabellen befinden können, die natürlich dann _nicht_ so aussehen sollen.
Nicht ganz, es ist schwer zu erklären.
Ich möchte ganz einfach nur ersparen, dass in den Templates unnötige Klassenangaben sind. Mehr nicht.
Glaskugel: Du hattest doch nicht etwa '
table.cpres th, td' geschrieben?
Nein, hatte ich nicht geschrieben. Es ist doch alles in meinem Post beschrieben.