4. IE6 und Klassenselektor in CSS?

IE6 und Klassenselektor in CSS?

  • D

    Hallo
    ist es wahr oder nur ein schlechter Scherz das IE6 keine Klassenselektoren in CSS untersützt?

    Also z.B folgendes:

    .titel { font-size: 14px; font-weight: bold; }
.titel.normal { color: rgb(100, 255, 100); }
.titel.wichtig { color: rgb(255, 0, 0); }

<div class="titel normal">Normaler Titel</div>
<div class="titel wichtig">Wichtiger Titel</div>
    0
  • ?

    just try it

    0
  • D

    Aus http://yatil.de/Weblog/die-10-wichtigsten-ie7-neuerungen

    6. Anweisungen mit mehreren Klassen werden korrekt ausgewertet

    Bisher gab es verschiedene Anomalien bei Verwendung von mehreren Klassen in Anweisungen wie beispielsweise p.klasse1.klasse2. Diese Anweisungen trifft nun auf Elemente wie <p class="klasse1 klasse2">...</p> zu.

    Wie unkorrekt arbeitete den der IE6 mit CSS-Klassen?

    0
  • S

    Wer hat denn noch IE6, nein der hat damit Probleme. Siehe http://www.thestyleworks.de/quickref/browser-support-12.shtml

    MfG SideWinder

    0
  • D

    Ich hab jetzt übelst Lust eine Bombe nach Redmond zu schicken die alle MS Mitarbeiter verbrennt. Wie kann man sowas essensielles nicht richtig in einem Browser implementieren? Und wieso haben nicht alle Webdesigner Sturm gegen den IE gemacht?

    Meine HP wird vollkommen falsch angezeigt, weil ich immer CSS-Klassen verwendet habe.
    http://www.muellerdevent.org
    So sieht die Seite in Opera aus: http://www.muellerdevent.org/userspace/1001/deventhp_startseite

    0
  • S

    Keine Sorge, dein Problem verflüchtigt sich dank Windows Update von alleine.

    MfG SideWinder

    0
  • D

    Wieso erscheint eigentlich zu 90% nur der IE als Problem-Browser? Ist das die hochgelobte Qualität des Marktführers?

    Kann mir pls jemanden Bilder der Seite posten im IE6 und IE7? Ich habe grade nur Linux am laufen und weit und breit keine Win-Kiste.

    0
  • S

    DEvent schrieb:

    Wieso erscheint eigentlich zu 90% nur der IE als Problem-Browser? Ist das die hochgelobte Qualität des Marktführers?

    IE7 erscheint kaum als Problembrowser, kann ich also nicht nachvollziehen.

    Der IE6 hätte ruhig öfters mal geupdated werden können - aber wo keine Nachfrage da auch kein Angebot. Die User hatten nie Probleme, die braven Entwickler haben ja immer tolle Workarounds gefunden 🙂

    MfG SideWinder

    0
  • M

    Normalerweise verwendet man Klassen auch intelligenter um Elemente anzusprechen.
    Du machst:

    <a class="x">
    <b class="x y">
    <b class="x y">
</a>

    und verwendest im CSS dann "b.x.y".

    Normalerweise würde man das so schreiben:

    <a class="x">
    <b>
    <b>
</a>

    und b dann im CSS mit "a.x b" adressieren. Diese normale und übliche Variante ist nicht nur kürzer, eleganter und schöner, der IE kapiert sie sogar auch 😉

    0
  • D

    Was machst du aber wenn du mehere Seiten hast? Oder etwa das gleiche in der selben Seite:

    <div class="a">
    <a>Text</a>
    <a>Wichtiger Text, wie unterscheidest du nun?</a>
</div>

<div class="a">
    <a>Zwar gleich wie das obere, aber leicht anders</a>
    <a>Text</a>
</div>

    Ich mache z.B. sehr gerne sowas:

    <div class="links">

<a class="link normal" href="blaa">blaa</a>
<a class="link selektiert" href="blaa">blaa</a>

</div>

    Nichtmal sowas kann der beschissene IE6.

    0
  • R

    DEvent schrieb:

    Ich mache z.B. sehr gerne sowas:

    <div class="links">

<a class="link normal" href="blaa">blaa</a>
<a class="link selektiert" href="blaa">blaa</a>

</div>

    Nichtmal sowas kann der beschissene IE6.

    Ich kenne ehrlich keine Webseite, die CSS-Klassen derart handhabt ...

    Was spricht einfach hiergegen?

    <a class="linkDefault" href="blaa">blaa</a>
<a class="LinkSelected" href="blaa">blaa</a>
    0
  • S

    Anti-1337ness natürlich.

    MfG SideWinder

    0
  • M

    DEvent schrieb:

    Ich mache z.B. sehr gerne sowas:

    <div class="links">

<a class="link normal" href="blaa">blaa</a>
<a class="link selektiert" href="blaa">blaa</a>

</div>

    Nichtmal sowas kann der beschissene IE6.

    Bei deinem ersten Beispiel vergibst du eben eine Klasse für jede Textklasse - so ist das ja auch gedacht.
    Bei deinem zweiten Beispiel, das ich hier zitiert habe, ist die Klasse "link" schlichtweg absolut überflüssig. "div.links a.normal" wählt bereits nur Links der Klasse "normal" innerhalb des DIVs aus. Analog "div.links a.selektiert".
    Wenn du von den eleganten weil redundanzfreieren Möglichkeiten von CSS Gebrauch machst, kannst du eine Menge deiner Klassen einsparen und der dämliche IE macht sogar dabei mit.

    0
  • D

    SideWinder schrieb:

    Anti-1337ness natürlich.

    MfG SideWinder

    Naja weniger Tipparbeit?
    So definiere ich bei der gemeinsamen Klasse das grobe Aussehen. Dann brauche ich bei .selected blos ein font-weight: bold; oder color: rgb();

    0
  • M

    Schön zu wissen, dass man (zumindest in Browsern ohne IE) auch so adressieren kann, man lernt halt nie aus. ^^

    Aber in den hier genannten Beispielen macht das tatsächlich keinen Sinn. Bei Links kannst Du einfach

    <style type="text/css">
a.normal { ... }
a.wichtig { ... }
</style>
<a href="#" class="normal">...</a>
<a href="#" class="wichtig">...</a>

    machen.

    Bei Überschriften entsprechend mit den hx-Tags

    <style type="text/css">
h1.normal { ... }
h1.wichtig { ... }
h2.normal { ... }
h2.wichtig { ... }
</style>
<h1 class="normal">...</h1>
<h1 class="wichtig">...</h1>
<h2 class="normal">...</h2>
<h2 class="wichtig">...</h2>

    Und fertig. 😃

    Allerdings hatte ich auch schonmal Fälle, wo ich mir diese Adressierung gewünscht hätte, wenn ich mich nur erinnern könnte. 😞

    Fact ist aber, wenn man sematisch korrekt und minimal arbeitet, dann braucht man das "fast" nicht.

    0
  • D

    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.

    0
  • M

    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. 😃

    0
  • R

    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>
    0
  • M

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

    0
  • ?

    SideWinder schrieb:

    Anti-1337ness natürlich.

    MfG SideWinder

    😃 👍

    0
  • R

    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 ... 😃

    0
Anmelden zum Antworten