Kommentare zu: Der Internet Explorer 6 und sein Problem mit IDs und Klassen

Von: Opticshop

Opticshop — Tue, 29 Mar 2011 13:09:00 +0000

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

Von: Computer Kiel

Computer Kiel — Mon, 04 Oct 2010 07:18:22 +0000

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

Von: Florian Stelter

Florian Stelter — Sun, 15 Feb 2009 10:42:03 +0000

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”); }

Von: qwertz

qwertz — Wed, 13 Aug 2008 19:27:40 +0000

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”); }
 

Von: macx

macx — Mon, 28 Jul 2008 06:09:49 +0000

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.

Von: Heiko Fuhrmann

Heiko Fuhrmann — Sun, 27 Jul 2008 19:00:11 +0000

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

Von: Niko Fischer

Niko Fischer — Tue, 18 Mar 2008 09:24:46 +0000

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

Von: Dominik

Dominik — Mon, 17 Mar 2008 18:26:18 +0000

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

Von: macx

macx — Mon, 17 Mar 2008 17:06:11 +0000

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.

Von: Jens Grochtdreis

Jens Grochtdreis — Mon, 17 Mar 2008 16:51:29 +0000

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!

Von: Dennis Frank

Dennis Frank — Mon, 17 Mar 2008 15:37:46 +0000

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

und .box.big {} muss man ein unschönes

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.