[JS/CSS] Problemen met combinatie van links en layers in IE

[Theske]

Beste Tweakers,

Sorry voor de misschien onduidelijke titel, maar ik kon niet in 1 zin goed mijn probleem uitleggen/weergeven.

Ik heb een slideshow op mijn website staan met daarboven een dropdownmenu balk.
De slideshow beschikt over verschillende foto's die elkaar dus afwisselen. Deze foto's beschikken bijna allemaal over een link, dat wanneer de foto voorbij komt je op de foto (projectfoto) kunt klikken om naar het desbetreffende project te gaan.

Dit werkt allemaal perfect in FireFox.... en je raad het al, IE geeft hier weer lekker problemen bij. In IE geeft hij de links wel weer, maar zodra ik mijn mijn muis over het menu ga (het menu klapt uit), dan verdwijnen deze layers ONDER de slideshows.

Wat ik allemaal heb geprobeerd:::
De layers van het menu een z-index van 10 gegeven (heeft geen invloed)

Cascading Stylesheet:

#dropmenudiv1{
        /* blabla, nog meer styles */
    z-index: 10;
}

De gehele slideshow (18 kleine slideshowtjes) een div toegewezen van -10 ---> de layers komen inderdaad boven de slideshows terecht, alleen de linkjes van de foto's werken niet meer!!! ( --> nieuw/ander probleem <-- )

Cascading Stylesheet:

#slide { overflow:hidden;
         z-index:-10;
}

De gifjes apart een z-index van -10 gegeven, nu komen de layers wel mooi achter de gifjes terecht, alleen werken de toegewezen links wederom niet.

Ik heb deze code ff in stukjes gehakt (door er een paar enters in te zetten) zodat deze voor jullie wat overzichtelijker is. Let dus niet op de rode streepjes die GoT erin heeft gezet. Onder deze code staat de "orginele" zonder enters erin.

Java:

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('
<div id="master'+this.slideshowid+'" style="z-index:-10;position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;">
<div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:100;-khtml-opacity:100;background-color:'+fadebgcolor+';">
</div>
<div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:100;background-color:'+fadebgcolor+'">
</div>
</div>')
else
document.write('<div>[img]"'+this.postimages[0].src+'"></div[/img]')

hier de code zonder "enters" erin.

Java:

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="z-index:-10;position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:100;-khtml-opacity:100;background-color:'+fadebgcolor+';"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity:100;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div>[img]"'+this.postimages[0].src+'"></div[/img]')

Als ik de z-index in bovenstaande code weghaal, verdwijnen de menubalk layers dus weer onder de slideshow en zijn de gifjes weer clickable. Zodra ik de z-index toevoeg, komen de layers naar boven en zijn de gifjes niet meer clickable.. help help help!

Nogmaals, Firefox maakt er totaal geen probleem van en doet het in alle gevallen zoals het hoort!!

Ik hoop dat jullie hiermee mijn probleem kunnen oplossen, dus dat ook in IE de layers ONDER de slideshows terecht komen en dat de links het doen.
Ik zou het sonde vinden van de moeite, als ze het niet doen
Mochten jullie nog meer informatie nodig hebben, vraag/zeg het!!!

Alvast heel erg bedankt voor de moeite!

p.s.
eventueel voor de geinteresseerde:: hier heb ik de slideshow vandaan, met zelf uiteraard wat aanpassingen om hem af te stellen op mijn website. http://www.dynamicdrive.c...dex14/fadeinslideshow.htm

[Theske]

Kickje...

[crisp]

z-index is broken in IE; in IE moeten elementen met z-index dezelfde offset-parent hebben wil het goed werken. In elk geval had je volgens mij al wel door dat z-index alleen werkt op positioned elements.
Nog een tip: gebruik geen negatieve waarden voor z-index; o.a. Firefox heeft daar nog wel eens problemen mee.

Om je beter te kunnen helpen zou een online (versimpelt) voorbeeld van je probleem wel makkelijk zijn; de losse stukken code in je topicstart zijn niet echt voldoende om een testcase te bouwen...

[Theske]

Bedankt voor je reactie.

Ik heb van de z-index maar een waarde gemaakt van 0 ipv -10. Ik had voor -10 gekozen om er zeker voor te zijn dat dit de laagste z-index was op de site.
Ik heb nu twee keer een stukje uit de site geknipt met aanpassingen in het stukje javascript (zie mijn start post)

Hier staat in de JS code bij de div style GEEN z-index waarde; bij een waarde van z-index:10; hetzelfde resultaat --> het menu valt ACHTER de foto's en de foto's bevatten een link

Hier staat in de JS code bij de div style z-index een waarde van 0 (voorheen -10) --> het menu valt, zoals het hoort, VOOR de foto's maar de foto's bevatten GEEN link

Uiteindelijk moet het menu dus VOOR de foto's vallen en moeten de foto's een link bevatten.
Ik hoop dat jullie me verder kunnen helpen hiermee. In firefox werkt het dus allemaal goed!

[Theske]

Hopen op een helpend kickje

*Kick

[crisp]

Hmmz; ik had gehoopt op een beetje nette semantische code, maar dit is weer table-misbruik voor layout met nog een hoop JS erachter...

Ik zal eens moeten kijken of ik daar een minimum testcase van kan maken om te bepalen wat IE nou eigenlijk als offsetParent beschouwd. Ik denk dat je namelijk wel degelijk tegen de bugs/tekortkomingen van IE's positioningsmodel aanloopt.
In het kort komt het hierop neer: voorbeeld

[Theske]

Tja, sorry voor de misschien niet al te nette semantische code. Maar ik wilde toch een beetje in de content van mijn website blijven om zo misschien wat duidelijker mijn probleem weer te geven. Want ik vond het vooral erg vreemd dat de url verdwijnt wanneer de layer naar voren komt.

Ik hoop dat je er wat wijzer van kan worden, zodat je met deze wijsheid mij misschien verder kan helpen met mijn probleem. En aan je voorbeeld is inderdaad ook duidelijk het probleem te zien (afgezien van het ontbreken van de url's).
In ieder geval al bedankt voor de moeite!

[Theske]

Kickje

[Theske]

Kickje....?
*deze keer hopen op meer succes....

[Theske]

En wederom..... *kick!

[crisp]

je zou ook zelf kunnen proberen om er een simpele testcase van te maken?

[Theske]

Ik heb zelf ook al verschillende dingen geprobeerd en getest. Maar ik ben er gewoon nog niet in geslaagd om dit voor elkaar te krijgen.
Misschien dat het ook wel met een klein stukje javascript kan, maar zoveel ervaring heb ik nou ook weer niet met javascript om te weten wat ik misschien zou kunnen proberen... .om dit probleem op te lossen.
Het is niet zo dat ik stil heb gezeten, ik vind het ook wel leuk om ermee te rommelen.. maar als het na een tijd echt niet lukt..... dan hoop ik maar dat de kennis van jullie mij op weg kunnen helpen