[CSS] - Cumulatieve stijl classes in IE6

[gvanh]

Hallo!

Ik heb een menu dat als volgt (dynamisch) wordt opgebouwd (versimpelde weergave):

HTML:

<div class='menu'>
  <a href='#' class='green'>Eerste link</a>
  <a href='#' class='green'>Tweede link</a>
  <a href='#' class='green selectedlink'>Derde link</a>
</div>

Op een andere pagina ziet het menu er op dezelfde plaats zo uit:

HTML:

<div class='menu'>
  <a href='#' class='yellow'>Eerste link</a>
  <a href='#' class='yellow'>Tweede link</a>
  <a href='#' class='yellow selectedlink'>Derde link</a>
</div>

In de CSS heb ik de stijlen als volgt gedefinieerd (versimpelde weergave):

Cascading Stylesheet:

div.menu a {   background-color: gray;   }
div.menu a.yellow {   color: yellow;   }
div.menu a.green {   color: green;   }
div.menu a.selectedlink.green {   background-color: green;   }
div.menu a.selectedlink.yellow {   background-color: yellow;   }

Dit werkt in Firefox, Internet Explorer 7, Opera en Safari zonder problemen, maar Internet Explorer 6 begrijpt dit niet. Die "negeert" eigenlijk de "selectedlink" in de stijl definities. Hij geeft dus alle links die als class 'yellow' hebben de gele achtergrond, of er nou selectedlink bij staat of niet.

Is er een mogelijke 'hack' om IE6 toch te laten doen wat ik wil? Of is er wellicht überhaupt een andere oplossing?

Alvast bedankt voor het meedenken!

[chem]

Nope, je zult voor IE6 een extra class "selectedlink-green" oid moeten maken, en in een aparte iefix.css dat rechttreken.

Het is enorme armoede, maar je doet er niks aan (tenzij je JS gaat inzetten)...

[gvanh]

Zonde toch, dat Internet Explorer er vaak voor zorgt dat je niet "netjes" kan coden.
Maar gut ... uiteindelijk wel weer een oplossing gevonden. Alleen een stuk minder mooi.

Dank voor je snelle response.

[Verwijderd]

bedenk wel dat het class attribuut niks met stijl te maken heeft, maar alles met een semantieke uitbreiding op je elementnaam. Vermijd dus class names als "yellow" en "green"

[gvanh]

Ja ... daar heb je een puntje.
Maar wat nou als mijn element met class-toewijzing 'yellow' als enige functie binnen het document heeft om geel te zijn?

[chem]

Dan nog kan je beter bedenken waarom het geel is; is het een "alternate", is het een "selected" ?

Ik zie in je voorbeeld sowieso 3x "yellow", kan je dan niet beter de container (div#menu) een class geven a la "div#menu.alternate" zodat je vervolgens de a's kan stylen met "div#menu.alternate a", en dus ook met "div#menu.alternate a.selected" (zonder dubbele classes) wat je ook nog minder en duidelijkere html oplevert.

[Verwijderd]

je hebt altijd een reden om 'm geel te maken, omdat ie er uit moet springen, omdat ie geselecteerd is, omdat ie het laatst gewijzigd is of om te vertellen hoe de kleur geel eruit ziet. Volgens mij in jouw geval omdat ie op een andere pagina staat.

voor jouw geval stel ik dus voor:

Cascading Stylesheet:

body#frontpage .menu a {color: yellow}
body#frontpage .menu a.selected {background-color: yellow}

body#contact .menu a {color: green}
body#contact .menu a.selected {background-color: green}

[gvanh]

Ja, dat is op zich wel een mooie semantische insteek, het benoemen naar aanleiding van de functie binnen de website. Maar wat nou als mijn lieve klant over een paar maanden besluit dat vanaf dat moment niet de contact-pagina's gele menuutjes moeten krijgen, maar dat vanaf dat moment de productpagina's een geel menu moeten krijgen, of één of andere andere variatie.

In dat geval zou ik met jou opzet al mijn stijlen moeten gaan aanpassen. In de praktijk zal ik daar geen tijd voor hebben of kan ik daar de gewenste tijd niet aan besteden uit financiële overwegingen. Dan is er een stijl met naam "contact" die gebruikt wordt voor de productpagina. Verwarring alom. Nu is het voor een ieder duidelijk welk menu tot de "gele sectie" van de website behoort en kan ik al naar gelang de (grillige) wensen van de klant de kleur-toewjizing in mijn CMS wijzigen zonder dat daarvoor een aanpassing van de CSS nodig is.

Eigenwijs ben ik hè?!

[Verwijderd]

En wat nu als de klant helemaal geen geel meer wil? Je kan beter al je aparte onderdelen een class/id geven, zodat je alleen maar in je css de kleur bij een onderdeel hoeft aan te passen.