Der Internet Explorer 6 und sein Problem mit IDs und Klassen

17. März 2008 Bisher 11 Kommentare

Vor einer Weile hat mich der IE 6 wieder viel Zeit gekostet, weil er eine valide Seite mit validem Markup und validem CSS nicht korrekt anzeigen wollte. Irritierenderweise aber stellt der IE 6 die Dinge im Prinzip schon da, nur nicht in der von mir angewanten Methodik. Das lief schief: Der IE 6 ignorierte Klassen, die einem Container mit einer ID zugewiesen wurden, aber das eben nur teilweise. Die Lösung hatte ich mir vor mehr als einem Jahr mal notiert und hole es hier nun für euch nach.

Das Markup

Nehmen wir an, wir wollen einem Container ein Hintergrundbild mit auf den Weg geben:

<div id="footer">Mein Inhalt</div>
 

Das CSS sieht dann dazu so aus:

#footer {
    width: 200px;
    height: 50px;
    background: #eee url("/images/standard.gif") no-repeat;
}
 

Die Darstellung sieht hier im IE 6 genau so aus, wie unter dem Firefox.
Jetzt möchte ich aber jeder statischen Seite ein anderes Hintergrundbild zuweisen. Damit ich immer einen Standard habe, definiere ich nun zusätzlich Klassen:

<div id="footer" class="unterseite1">Mein Inhalt</div>
 

Das CSS sieht bei ein paar Seiten dann so aus:

#footer {
    width: 200px;
    height: 50px;
    background: #eee url("/images/standard.gif") no-repeat;
}
#footer.unterseite1 { background-image: url("/images/unterseite1.gif"); }
#footer.unterseite2 { background-image: url("/images/unterseite2.gif"); }
#footer.unterseite3 { background-image: url("/images/unterseite3.gif"); }
#footer.unterseite4 { background-image: url("/images/unterseite4.gif"); }
 

Interessanterweise stellt der nun IE 6 die “Unterseite 1” mit dem jeweiligem Bild dar. Bei der Seiten 2 – 4 wird das Standardbild angezeigt. Halten wir fest: Das Markup ist 100% valide ohne Fehler und Warnungen, das CSS ist ebenfalls validiert.

Wenn ich nun im CSS zuerst das Hintergrundbild für Seite 3 definiere und dann erst 1, 2 und 4, so wird das jeweilige Bild bei Seite 3 korrekt angezeigt, bei der Seite 1, die ja zuvor richig angezeigt wurde, wie auch bei den anderen nicht. Dort erscheint nun das Standardbild.

Die Fakten

Der Internet Explorer 6 hat Probleme, Klassen zu erkennen, sofern die Objekte ebenfalls eine ID enthalten.

Die Lösung

Da es offensichtlich auch kein Wordaround für dieses Problem gibt, musste ich mir anders helfen. Eine Lösung wäre gewesen, wenn ich jeder Unterseite eine eigene ID oder eben eine eigene Klasse (ohne ID) mit auf den Weg gebe, was aber heissen würde, dass ich im CSS die gleichen Anweisungen für verschiedene IDs oder Klassen definieren müsste.
In meiner Löung verzichte ich auf die Definierung einer eindeutigen ID und mache aus ihr eine weitere Klasse. Da man einem Objekt zwei oder mehr Klassen mit auf dem Weg geben kann, was übrigens auch der IE 6 beherrscht, finden wir so zur Lösung:

<div class="footer unterseite1">Mein Inhalt</div>
 

Das CSS sieht dann so aus:

div.footer {
    width: 200px;
    height: 50px;
    background: #eee url("/images/standard.gif") no-repeat;
}
div.unterseite1 { background-image: url("/images/unterseite1.gif"); }
div.unterseite2 { background-image: url("/images/unterseite2.gif"); }
div.unterseite3 { background-image: url("/images/unterseite3.gif"); }
div.unterseite4 { background-image: url("/images/unterseite4.gif"); }
 

Dieser Artikel wurde am Montag, 17. März 2008 um 17:14 Uhr von macx geschrieben und unter Intern, Webdesign abgelegt. Du kannst die Antworten zu diesem Beitrag via RSS 2.0-Feed beobachten.

Hinterlasse hier eine Nachricht, oder sende einen Trackback von deiner Webseite aus.
Trackback-URL: http://macx.de/journal/ie6-problem-mit-ids-und-klassen/trackback/

Kommentare

Einen eigenen Kommentar schreiben

  1. 1 Dennis Frank schrieb am 17. März 2008 (17:03 Uhr)

    Jaja, so was nervt. Genauso die Unfähigkeit des IE6 verknüpfte Klassen zu erkennen. Man ist so immer mal wieder gezwungen, unschöne doppelt gemoppelte Klassen zu erstellen.

    Anstatt <div class="box big"> und .box.big {} muss man ein unschönes <div class="box box-big"> oder ähnliches schreiben.

    Da hilft auch kein CSS-Hack oder Conditonal Comments.

    Bei meinen eigenen Seiten werde ich da ab sofort etwas rücksichtsloser mit dem IE6 umgehen. Es reicht.

  2. 2 Jens Grochtdreis schrieb am 17. März 2008 (18:03 Uhr)

    Und was spricht dagegen, dem Footer eine ID zu geben und den Hintergrundwechsel nur über die Klasse zu machen? mache aus div#footer.unterseite1 und schreibe einfach div.unterseite1. Das sollte vollkommen genügen. Zur Not muss man mit einem !important arbeiten, aber eigentlich sollte das das nicht zwangsweise notwendig sein. Du kannst es auch damit umgehen, div#parentContaiber div.unterseite zu schreiben.
    Trotzdem ist das von dir beobachtete Verhalten seltsam und sollte nicht vorkommen. Aber die Programmierer in Redmond sind einfach kreative Spaßmacher!

  3. 3 macx schrieb am 17. März 2008 (19:03 Uhr)

    Natürlich gibt es andere Wege, auch die von dir beschriebenen. Ein Elternelement wäre eine Möglichkeit, doch zusätzliches Markup. Im Prinzip ging es mir eigentlich nur darum, aufzuzeigen, dass IDs in Verbindung mit Klassen unter dem IE 6 Probleme bereiten können. Das spart dem einen oder anderen eine lange Fehlersuche.

  4. 4 Dominik schrieb am 17. März 2008 (20:03 Uhr)

    Bei einem aktuellen Projekt habe ich an diesem Problem auch Stunden gesessen und wusste keinen Rat mehr. Gelöst habe ich das dann mit zusätzlichem Markup, aber schön ist das nicht.

    Ich werde da wohl deinen Lösungsweg integrieren, der scheint mir am elegantesten…

    Danke,
    Dominik

  5. 5 Niko Fischer schrieb am 18. März 2008 (11:03 Uhr)

    Ja der Internet Explorer. Jedesmal nehm ich mir vor bei neuen Projekten ganz penibel auf den IE Rücksicht zu nehmen. Letzendlich artet es jedoch immer in einen Kulturkamp aus.

    Ich hoffe dass mit dem IE 8 alle mal ein wenig besser wird…

    Niko

  6. 6 Heiko Fuhrmann schrieb am 27. Juli 2008 (21:07 Uhr)

    Hallo David!

    Der Artikel ist zwar schon ne weile alt, aber ich geb trotzdem mal meinen Senf dazu.

    Du schreibst, dass ein Elternelement eine Möglichkeit wäre, jedoch mehr zusätzliches Markup bedeutet.

    So viel ist es doch gar nicht.

    Ich gebe dem Body-Tag immer eine ID (ist ja auch fast mit jedem CMS mittlerweile kein Problem mehr).

    Body sieht dann also so aus:

    body id=“startseite”
    body id=“unterseite1”
    body id=“unterseite2”

    Das CSS sieht dann bspw. bei mir so aus:

    #footer {
    width: 200px;
    height: 50px;
    background: #eee url(”/images/standard.gif”) no-repeat;
    }

    body#startseite #footer
    { background-image: url(”/images/standard.gif”); }

    body#unterseite1 #footer
    { background-image: url(”/images/unterseite1.gif”); }

    body#unterseite2 #footer
    { background-image: url(”/images/unterseite2.gif”); }

    Die einzige Änderung wäre doch nur, der um eine ID erweiterte Body-Tag.

    Gruß
    Heiko

  7. 7 macx schrieb am 28. Juli 2008 (08:07 Uhr)

    Danke Heiko!
    Natürlich kann man mit zusätzlichem Markup jede Menge machen, wie ich dann eigentlich auch schon egal. Egal, ob du dem body oder einem DIV noch eine ID mitgibst.

  8. 8 qwertz schrieb am 13. August 2008 (21:08 Uhr)

    Ich glaube es gibt doch einen Workaround, der allerdings etwas Banane ist. Man muss die Klassendefinitionen einfach nur in einzelne Style-Tags packen, dann sollte es meines Wissens nach auch der IE6 kapieren. Also z.B.:

    div.footer {
    width: 200px;
    height: 50px;
    background: #eee url(”/images/standard.gif”) no-repeat;
    }
    div.unterseite1 { background-image: url(”/images/unterseite1.gif”); }
    div.unterseite2 { background-image: url(”/images/unterseite2.gif”); }
    div.unterseite3 { background-image: url(”/images/unterseite3.gif”); }

     

  9. 9 Florian Stelter schrieb am 15. Februar 2009 (12:02 Uhr)

    Oder man achtet einfach darauf, Klassen mit solchen Funktionen nicht gleichzeitig für andere Funktionen zu verwenden.

    Dann reicht:
    .unterseite1 { background-image: url(”/images/unterseite1.gif”); }
    .unterseite2 { background-image: url(”/images/unterseite2.gif”); }

    Man kann sicherheitshalber das ganze mit ConditionalComments nur für den IE nutzen, falls aus versehen doch eine Klasse noch einen anderen Zweck erfüllt. Im normalen Stylesheet würde man dann den normalen Weg gehen:
    div.unterseite1 { background-image: url(”/images/unterseite1.gif”); }
    div.unterseite2 { background-image: url(”/images/unterseite2.gif”); }

  10. 10 Computer Kiel schrieb am 04. Oktober 2010 (09:10 Uhr)

    div.footer {
    width: 200px;
    height: 50px;
    background: #eee url(”/images/standard.gif”) no-repeat;
    }
    div.unterseite1 { background-image: url(”/images/unterseite1.gif”); }
    div.unterseite2 { background-image: url(”/images/unterseite2.gif”); }
    div.unterseite3 { background-image: url(”/images/unterseite3.gif”); }

    Funktioniert bei mir nicht

  11. 11 Opticshop schrieb am 29. März 2011 (15:03 Uhr)

    Das Problem besteht auch bei verketteten Klassen. Verwendet man z.B.

    rechte Box
    linke box

    mit den Klassen:

    .box.right {float:right;}
    .box.left {float:left;}

    kann das der Internet-Explorer 6 nicht darstellen. Die einzige Lösung wäre in diesem Fall der Workarount über den typ-Selektor:

    div.right {float.right;}
    div.left {float.left;}

    Besonders ärgerlich, wie in unserem Fall, ist wenn es um das Element geht. Wir verwenden allgemein folgendes Markup:

    um den Buttons ein unterschiedliches Aussehen zu geben gibt es dann:

    Ärgerlich ist, wenn man für die selben CSS-Klassen wählt.

    Den Selektor über den Typ kann IE6 schließlich leider auch nicht. So kann ich mich nur den vorrednern anschließen… man muss wieder alles kompliziert machen für den IE. Wenn man aber das Markup nicht beeinflussen kann ist man aufgeschmissen!

    lg, Flo

Antwort schreiben

Kommentare neuer Teilnehmer werden auf Grund von hohem SPAM-Aufkommen zunächst von mir freigeschaltet, bis sie online erscheinen. Textile kann benutzt werden.

(wird nicht veröffentlicht)