nicht angemeldet
Class- und ID-Kombination
0 0 
Gernot Back
0 0 0 0 0 0
Class- und ID-Kombination
Gunnar BittersmannFolgender Code funktioniert im Firefox jedoch nicht, wie könnte es wohl anderst sein, im IE6. Google hat zu diesem Thema auch nichts finden können.
/* CSS-Datei */
...
div#EinDiv.rot {
background-color: #FF0000;
}
div#EinDiv.gruen {
background-color: #00FF00;
}
div#EinDiv.blau {
background-color: #0000FF;
}
...
/* HTML-Datei */
...
<div id="EinDiv" class="gruen"></div>
...
Handelt es sich hierbei um ein Bug im IE?
Gibt es eine Lösung für den IE6: IDs und Klassen in einem Tag zu kombinieren?
Danke!
-
Hallo Notschko,
Folgender Code funktioniert im Firefox jedoch nicht, wie könnte es wohl anderst sein, im IE6. Google hat zu diesem Thema auch nichts finden können.
div#EinDiv.rot {
background-color: #FF0000;
}setze ein Leerzeichen zwischen IDs und Klassen:
div#EinDiv .rot {
Handelt es sich hierbei um ein Bug im IE?
Ich glaube nicht. Es liegt an deiner Schreibweise.
Gibt es eine Lösung für den IE6: IDs und Klassen in einem Tag zu kombinieren?
Tags sind die Steuerzeichen in HTML (<p>, <h1>, <b> tec.)
Mit freundlichen Grüßen,
André-
Hallo Zeromancer,
setze ein Leerzeichen zwischen IDs und Klassen:
div#EinDiv .rot {
Das würde die Elemente mit der Klasse "rot" selektieren, die sich innerhalb eines DIV-Elements mit der ID="EinDiv" befinden. Notschko meint aber das DIV-Element das gleichzeitig der Klasse "rot" angehört und die ID="EinDiv" hat.
Gruß Gernot
-
-
Hallo Notschko,
/* CSS-Datei */
div#EinDiv.rot {
background-color: #FF0000;
}div#EinDiv.gruen {
background-color: #00FF00;
}div#EinDiv.blau {
background-color: #0000FF;
}/* HTML-Datei */
...
<div id="EinDiv" class="gruen"></div>Wie ist es denn, wenn du es umgekehrt machst?
div.rot#EinDiv{ background-color: #FF0000; } div.gruen#EinDiv { background-color: #00FF00; } div.blau#EinDiv{ background-color: #0000FF; }Also der Rangfolge nach vom allgemeinen Elementselektor über den spezifischeren Klassenselektor zum ganz spezifischen ID-Selektor, was ja auch logischer wäre?
http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet
Gruß Gernot
-
Hello out there!
Also der Rangfolge nach vom allgemeinen Elementselektor über den spezifischeren Klassenselektor zum ganz spezifischen ID-Selektor, was ja auch logischer wäre?
„Ein einfacher Selektor ist entweder ein Typselektor oder ein universeller Selektor, unmittelbar gefolgt von null oder mehr Attribut-Selektoren, ID-Selektoren oder Pseudo-Klassen in beliebiger Reihenfolge.“ [CSS2 §5.2]
Ich gehe mal davon aus, dass sich „in beliebiger Reihenfolge“ auf die ganze Aufzählung bezieht. Dumme Formulierung aber auch! Im Original ist es nicht besser:
“A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order.” [CSS21 §5.2]
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
-
-
Hallo,
Handelt es sich hierbei um ein Bug im IE?
Gibt es eine Lösung für den IE6: IDs und Klassen in einem Tag zu kombinieren?Bei mir funzt das eigentlich problemlos.
Der Fehler scheint wo anders zu liegen…
mfg. Daniel
-
Hallo D.R.,
Der Fehler scheint wo anders zu liegen…
Vielleicht in einer Mehrfachvergabe derselben ID, wobei mich dann aber die Fehlertoleranz des Firefox und die Striktheit des IE wundern würde.
Gruß Gernot
-
-
Ich habe eure Vorschläge ausprobiert:
Die Reihenfolge von "div#EinDiv.rot" nach "div.rot#EinDiv" behebt die fehlerhafte Darstellung im IE nicht. Beide Varianten funktionieren prima im Firefox.
Das "Leerzeichen" führt dazu, dass es bei beiden Browser nicht funktioniert. Also: "div#EinDiv .rot".
Interessant ist, dass die Lösung "div#EinDiv.rot" im IE funktioniert. Sobald ich jedoch "div#EinDiv.gruen" verwenden möchte, wird keine Farbe angezeigt. Des wegen funktioniert das Beispiel von "D.R."
Es kommt also auf die Reihenfolge in der CSS-Datei an. Die erste Einstellung funktioniert immer. (In meinem Beispiel wäre das rot).
Deswegen hat es auch beim-
Hallo,
Es kommt also auf die Reihenfolge in der CSS-Datei an. Die erste Einstellung funktioniert immer.
Also doch das, was ich vermutet hatte: Du darfst eine ID nur 1x verwenden!
<div id="meinDiv" class="rot" /> <div id="meinDiv" class="gruen" />ist NICHT erlaubt. Du kannst aber auch mehrere Klassen zuweisen. Das könnte dann so aussehen:
<div class="meinDiv rot" /> <div class="meinDiv gruen" />Selektieren kannst du das dann z.B. so:
div.meinDiv.rot {Formatierungen}mfg. Daniel
-
Hallo Daniel
Es kommt also auf die Reihenfolge in der CSS-Datei an. Die erste Einstellung funktioniert immer.
Also doch das, was ich vermutet hatte: Du darfst eine ID nur 1x verwenden!
Es muss nicht zwingend eine ID mehrfach verwendet sein. Denkbar wäre auch, dass verschiedene Dokumenten, die das selbe Stylesheet verwenden, ein Element mit dieser ID enthalten, das jeweils ein abweichendes Aussehen erhalten soll.
Auch wenn ich in so einem Fall eher mit einer Seiten-ID oder -Klasse und dem Nachfahrenselektor arbeiten würde, ist der Fall nicht ausgeschlossen.Wenn ich mich richtig erinnere, wurde dieses Problem hier schon einmal erörtert, wobei wir feststellten, dass der IE den Klassenselektor für ein Element ingnoriert, wenn dieses bereits durch die ID selektiert wird.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
Hi,
Handelt es sich hierbei um ein Bug im IE?
ja, natürlich. Der IE 6 erlaubt pro Stylesheet nur eine Regel, in denen in einem Simple Selector sowohl ID- als auch Klassenselektor stehen. Jede nachfolgende (wie gesagt: in diesem Stylesheet) ignoriert er.
Gibt es eine Lösung für den IE6: IDs und Klassen in einem Tag zu kombinieren?
Ja. Beschränke die Anzahl auf 1 pro Stylesheet.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Ich habe hier ein komplettes "fehlerhaftes" Beispiel:
<html>
<head>
<style type="text/css">
<!--div.rot#EinDiv {
background-color:#f00;
}div.gruen#EinDiv {
background-color:#0f0;
}div.blau#EinDiv {
background-color:#00f;
}//-->
</style>
</head><body>
<div id="EinDiv" class="gruen">
test
</div></body>
</html> -
Hallo,
kann es sein, dass Du die id "EinDiv" mehrfach vergeben hast? Das ist nicht zulässig, da ids (id = identifier) im HTML-Dokument eindeutig sein müssen.
Also gibt es eigentlich zwei Möglichkeiten:
a) jeder Bereich ist eindeutig:
Die Bereiche bekommen keine Klassen, nur eindeutige ids wie "einRotesDiv", "einGruenesDiv" ...
b) jeder Bereich kann mehrfach vorkommen:
Die Bereiche bekommen keine ids, sondern alleine die Klassen "rot", "gruen" ...
Gruß
Olaf -
Unter den Thread (href=http://forum.de.selfhtml.org/?t=138769&m=901650) findest du ein kleines Beispiel, welches unter IE6 nicht richtig dargestellt wird. Jede ID (im Beispiel gibt es nur ein DIV-Element) ist einmalig vergeben.