IE6 und Klassenselektor in CSS?

DEvent

Naja ich mach halt öffter sowas:

<style type="text/css"> 
a.meinlink { font-size: 12px; display: list-item; } 
a.normal { color: rgb(100, 100, 255) } 
a.wichtig { color: rgb(255, 100, 100) } 
</style> 
<a href="#" class="meinlink normal">...</a> 
<a href="#" class="meinlink wichtig">...</a>

Funktioniert auch wunderbar und wenn man für die Basisklasse viele Attribute hat, dann erspart das eine menge Tipparbeit. Leider funktioniert es nicht bei IE6, oder nur teilweise.

mantiz

hm, das nun von Dir eingestellte Beispiel funktioniert bei mir im IE6 wunderbar.
Jedoch macht es keinen Sinn einem Link eine Klasse zu geben, um ihn als Link zu klassifizieren. Dafür sind die Tag-Selektoren da.

Dein Beispiel wäre also so viel schöner:

<style type="text/css">
a         { font-size: 12px; display: list-item; }
a.normal  { color: rgb(100, 100, 255) }
a.wichtig { color: rgb(255, 100, 100) }
</style>
<a href="#" class="normal">...</a>
<a href="#" class="wichtig">...</a>

Und auch, wenn man Links in verschiedenen Bereichen selektieren will, kann man das so machen:

<style type="text/css">
	#header  a         { ... }
	#header  a.wichtig { ... }
	#left    a         { ... }
	#left    a.wichtig { ... }
	#content a         { ... }
	#content a.wichtig { ... }
</style>
<div id="header">
	<a href="#">...</a>
	<a href="#" class="wichtig">...</a>
</div>
<div id="left">
	<a href="#">...</a>
	<a href="#" class="wichtig">...</a>
</div>
<div id="content">
	<a href="#">...</a>
	<a href="#" class="wichtig">...</a>
</div>
...

Ich seh' da jetzt kein Problem drin. So können sich auch gleiche Klassen in verschiedenen Bereichen der Seite unterschiedlich verhalten. Mehrere Klassen z.B. "extern" und "wichtig" kann man zusätzlich noch kombinieren, um z.B. externe Links mit einer Grafik zu versehen, etc.
So ist es sauber und wenig Tipparbeit.

Sicher, man könnte jetzt je eine Klasse für Links im header-, left- und content-Bereich definieren, aber ob ich jetzt als Selektor ".HeaderLink" oder "#header a" schreibe, da ist letztere doch ein wenig kürzer und (vor allem) schöner.
Desweiteren kann ich noch Links in Absätzen bspw. anders kennzeichnen, als in Listen, z.B.

<style type="text/css">
#content p a {
    color:           #000;
    text-decoration: underline;
}
#content li a {
    color:           #F00;
    text-decoration: none;
}
...
</style>

Ich sehe nicht, wo Deine Methode hier sauberer, effektiver, flexibler oder auch nur kürzer wäre.
Natürlich wird bei (meiner) Art der Selektor mit zunehmender Verschachtelung länger, aber zu viel sollte man sowieso nicht verschachteln und zudem ist es wesentlich flexibler, da ich auf diese Weise nicht ständig neue Klassen definieren muss, nur weil ich plötzlich nicht nur im Content-Bereich eine Link-Klasse wichtig habe, sondern auch im Navi-Bereich. Die Klasse "wichtig" für Links gibt es ja bereits und steht sofort per "#navi a.wichtig" zur Formatierung bereit.

Reyx

Wo ist das Problem!?

<style type="text/css">
a.normal, a.wichtig {
   font-size: 12px;
   display: list-item;
}
a.normal { color: rgb(100, 100, 255) } 
a.wichtig { color: rgb(255, 100, 100) } 
</style> 
<a href="#" class="normal">...</a> 
<a href="#" class="wichtig">...</a>

mantiz

"a.normal, a.wichtig" ist mehr Tipparbeit, als z.B. ".meinlink" bzw. "a".

SideWinder schrieb:

Anti-1337ness natürlich.

MfG SideWinder

Reyx

mantiz schrieb:

"a.normal, a.wichtig" ist mehr Tipparbeit, als z.B. ".meinlink" bzw. "a".

Stimmt, aber immer noch besser als <div class="link wichtig"></div><div class="link unwichtig"></div>
Ich wollte nur ausdrücken, dass es tausend Möglichkeiten gibt, das Ausgangsproblem zu umgehen. Obwohl es für mich kein Problem ist, dass ich das "link wichtig" in dem Fall für schlichtweg unpassend halte ...

mantiz

Ich habe schon ein paar Beiträge von Dir hier gelesen und ich glaube zu wissen, dass Du weisst, wie man es richtig bzw. schöner machen kann, also fühl Dich von meiner Kritik nicht angesprochen.

Wie es jeder macht, ist ja jedem selbst überlassen, man sollte sich nur nicht beschweren, wenn man es in der (aus meiner Sicht) ungünstigsten Variante macht, die anderen Möglichkeiten nicht verwendet bzw. nicht verwenden will und es damit Probleme gibt.
Im Webdesign-Bereich gibt es zahlreiche Ungereimtheiten, was die Browser angeht, da muss man flexibel sein und verschiedene Möglichkeiten probieren, A unterstützt das, B das und C wieder was anderes. Der kleinste gemeinsame Nenner ist meist zu wenig, um wirklich schöne Seiten zu schreiben, aber wenn man einigermaßen minimalistisch bleibt, dann hat man nur sehr wenige Probleme.
AFAIK ist es meist Unwissenheit, weshalb man sich über fehlerhaftes Verhalten beschwert. Natürlich ist das Verhalten des Browsers dadurch immernoch fehlerhaft, aber häufig gibt es Alternativen, die dann doch überall funktionieren. Mehr wollte ich gar nicht sagen.

Ich bin zwar auch noch ziemlich im Lernprozess, was das angeht, aber mittlerweile überprüfe ich meine Seiten im IE5.0, IE5.5, IE6.0, IE7.0, Opera 8.5, Netscape 7.1 und Firefox 2.0 und bis auf ein paar Kleinigkeiten hab' ich es bisher geschafft die Darstellung in allen Browsern vernünftig hinzubekommen.
Zugegeben, bisher waren es nur 3 Layouts, aber es werden bestimmt noch mehr.
Hoffentlich.

DEvent

thx mantiz, die Methode von dir funktioniert wunderbar und ist wirklich übersichtlicher als meine

mantiz

Kein Problem, freut mich, wenn ich helfen konnte. Eine Seite mehr, die schönen Code verwendet, bleiben nur noch .... wieviel Milliarden Seiten gab' es doch gleich nochmal?

Naja, ein Schritt nach dem anderen. :p

DEvent

mantiz schrieb:

Kein Problem, freut mich, wenn ich helfen konnte. Eine Seite mehr, die schönen Code verwendet, bleiben nur noch .... wieviel Milliarden Seiten gab' es doch gleich nochmal?

Naja, ein Schritt nach dem anderen. :p

Alleine das man das coole W3C-Logo auf die Seite draufmachen kann lohnt es sich dem Standard gerecht zu werden