{"id":1417,"date":"2009-04-21T22:34:52","date_gmt":"2009-04-21T20:34:52","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=1417"},"modified":"2009-04-21T22:34:52","modified_gmt":"2009-04-21T20:34:52","slug":"kombinierte-css-schreibweise-mit-klassen-und-id","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2009\/04\/kombinierte-css-schreibweise-mit-klassen-und-id\/","title":{"rendered":"Kombinierte CSS Schreibweise mit  Klassen und ID"},"content":{"rendered":"<p>Ich arbeite gerade an einer Webseite, deren Navigation aus zwei Gruppen besteht: Die erste Gruppe erh\u00e4lt ein blaues Hintergrundbild, die zweite Gruppe ein orangenes. Realisiert wird diese Navigation indem jedes li Element via skript eine eigene Klasse bekommt. Anstatt list-style-image habe ich dem Linkelement a padding-left gegeben und ein Hintergrundbild eingef\u00fcgt.<\/p>\n<p>Es gibt ein Hintergrundbild f\u00fcr den nicht aktiven Zustand und eines f\u00fcr :hover. Ist eine Seite aktiv, f\u00e4llt a weg. Stattdessen gibt es li mit span inside, dem ein weiteres Hintergrundbild f\u00fcr den aktiven Zustand zugeschrieben wurde.<\/p>\n<p>Das Ergebnis wird auch in allen Browsern angezeigt, nur im IE6 nicht.<\/p>\n<p>Der Grund: der IE6 kann Kombinationen aus Klasse und ID nicht darstellen, wenn zuerst die Klasse und dann die id kommt.<br \/>\n<code>li.OLMa7#OLMactiv<\/code>\u00a0 geht nicht.<\/p>\n<p>L\u00f6sung:\u00a0 immer zuerst die id schreiben, dann die Klasse:<br \/>\n<code>li#OLMactive.OLMa7<\/code> (<a href=\"http:\/\/http:\/\/xhtmlforum.de\/\">Danke an das xhtml Forum<\/a>)<\/p>\n<p>oder auf Kombinationen verzichten und die Eigenschaften entweder unter der id oder der Klasse zusammenfassen.<\/p>\n<p>Eine anderen Workaround habe ich leider nicht (er)finden k\u00f6nnen. Wenn aber jemand eine elegantere L\u00f6sung wei\u00df, w\u00fcrde ich einen Hinweis sehr gerne entgegennehmen.<br \/>\nIch freue mich auf den Tag, an dem der IE6 schlichtweg nicht mehr unterst\u00fctzt wird. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Der IE 6 kann Kombinationen aus Klassen und id nicht darstellen, wenn zuerst die Klasse und dann die id kommt. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[378,379,143,375,376,377],"yst_prominent_words":[],"class_list":["post-1417","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-klassen","tag-kombinierte-schreibweise","tag-css-xhtml","tag-bugs","tag-id","tag-ie6"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=1417"}],"version-history":[{"count":0,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1417\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=1417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=1417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=1417"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=1417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}