IE6 Background dynamisch ändern

[DiDiJo]

Hi Leute ... ich hab ein Problem auf folgender Seite ...

http://w00bc919.dd18032.kasserver.com/index.php

Ich hab sie schon soweit für alle gänigen Browser optimiert ... allerdings habe ich beim IE6 ein kleines Problem.

Auf der Rechten Seite habe ich ein paar ausklappbare Menus mit folgenden Aufbau

<div class="box schnellsuche">
		<div id="schnellsuche_link" class="box_headline close" onclick="toggleAll('schnellsuche_form','schnellsuche_link');"></div>
		<div id="schnellsuche_form" class="box_content" style="display:none;">

[CONTENT]

		</div>
</div>

Alle Boxen sind so aufgebaut ... und die JS Funktion macht nix anderes als dieses diplay:xyz umzuswitchen ... von block auf none und umgekehrt und das Hintergrundbild von (in diesem Fall) "#schnellsuche_link" auszutauschen indem die Klasse von open auf close geschaltet wird (und umgekehrt).

hier noch die Funktionen:

function toggleBackgroundImage(element) {
	var el = document.getElementById(element);
	
	link_class = el.className;
	if (link_class.search(' close') != -1) {
		el.className = link_class.replace(' close',' open');	
	} else {
		el.className = link_class.replace(' open',' close');			
	}	
	return false;
}

function toggleElement(element) {
	var el = document.getElementById(element);
	if (el.style.display == 'none') {
		el.style.display = '';
		}
	else {
		el.style.display = 'none';
	}
	return false;
}


function toggleAll(elDisplay,elImage) {
	toggleBackgroundImage(elImage);
	toggleElement(elDisplay);
}

Das funktioniert auch soweit überall, außer natürlich im IE6. Die Klasse wird zwar von "open" auf "close" gestellt aber der Browser zeigt keine reaktion obwohl ich folgendes Style-Sheet angebunden habe:

.box_headline {
	width:283px;
	height:25px;
	cursor:pointer;

	/*border-top: 1px dotted #b2b2b2;*/
}

.close#erweiterte_suche{background-image:url(../pics/button_close_erw_suche.jpg);}

.close#schnellsuche_link {background-image:url(../pics/button_close_suche.jpg);}
.open#schnellsuche_link {background-image:url(../pics/button_open_suche.jpg);}

.close#objnr_suche_link {background-image:url(../pics/button_close_objektnr.jpg);}
.open#objnr_suche_link {background-image:url(../pics/button_open_objektnr.jpg);}

.close#kontakt_link {background-image:url(../pics/button_close_kontaktadresse.jpg);}
.open#kontakt_link {background-image:url(../pics/button_open_kontaktadresse.jpg);}

.close#objektfunktionen_link {background-image:url(../pics/button_close_objfunktionen.jpg);}
.open#objektfunktionen_link {background-image:url(../pics/button_open_objfunktionen.jpg);}

.close#erwfunktionen_link {background-image:url(../pics/button_close_erwfunktionen.jpg);}
.open#erwfunktionen_link {background-image:url(../pics/button_open_erwfunktionen.jpg);}

wo könnte bloß mein Problem liegen ...

 

[Maik]

Hi,

frag mich bitte nicht, ob es für diesen Bug einen Namen gibt, aber der IE6 ignoriert hier scheinbar den zweiten Selektor ".open#ID" in den einzelnen "Selektorenpärchen". Würde ihre Reihenfolge im CSS-Code getauscht werden, funktioniert demnach ".close#ID" nicht mehr.

mfg Maik

 

[DiDiJo]

na super .... ich werd das einfach so beschrenken, dass der bilderaustausch nur bei leuten mit dem ie 7 und aufwärts funktioniert ... haben halt die anderen pech gehabt

 

[Sven Mintel]

Ein feiner + fieser Bug, den du da gefunden hast.

Es gibt aber eine Lösung:

Bsp#1.: (funktioniert nicht)

<style type="text/css">
<!--
.someclass#anID{color:red;}
.anotherclass#anID{color:blue;}
-->
</style>
<span id="anID" class="someclass">someclass</span>
<span id="anID" class="anotherclass">anotherclass</span>

Bsp#2.: (funktioniert)

<style type="text/css">
<!--
.someclass#anID{color:red;}
-->
</style>
<style type="text/css">
<!--
.anotherclass#anID{color:blue;}
-->
</style>
<span id="anID" class="someclass">someclass</span>
<span id="anID" class="anotherclass">anotherclass</span>

worum es geht, sollte erkennbar sein aus den Beispielen.

Frag mich aber nicht, warum es so ist, ist halt nen Bug.

 

[DiDiJo]

vielen dank ... ich werds morgen mal ausprobieren