Ultimate Fade-In Slide Show IE6 relative position / z-index question.

**yukon** · 03-31-2008, 04:20 AM

I have a navigation div that is relative position over the slideshow. That is the only way I can get it to appear over the slideshow. It works fine in Firefox and Safari, but in IE 6, the drop down submenu won't display.

What I need to do is be able to remove the relative position in the style sheet and be able to use z-index. Unfortunately, Ultimate Fade-in Slideshow seems to take over the highest z-index no matter what.

Is there a way to control the z-index in UFISS?

I need to have a navigation div positioned over the slideshow without actually using "position" in the stylesheet.

I currently have the div placed below the slideshow and then put a margin-top of -53px but it shows on intial load then fades behind the images on the transition.

Any insight would be appreciated.
Thanks

**adraper** · 06-09-2009, 06:34 PM

I am having this issue as well. I have a existing dropdown menu that is showing up BEHIND the slideshow. I tried to add a position and z-index, but unfortunately the slideshow still shows up in front of the dropdown menu in Firefox, Safari and Opera...it works fine in IE and Netscape?

**ontheroof** · 06-30-2009, 01:59 PM

i am having a similar problem... a div positioned above the slideshow (z-index) at first appears fine, and then eventually fades with one of the transitions. haven't a clue how to fix it... any ideas?

**vwphillips** · 06-30-2009, 03:07 PM

suggest you post a link to your application.

**ontheroof** · 07-07-2009, 07:09 AM

actually what worked in the end was making the z-index a ridiculously high number... 30000 i think. not sure why numbers in a normal range didn't work, but for whoever else might have a similar problem--please take note.

**ontheroof** · 07-07-2009, 07:14 AM

will post a link in case it actually DOESN'T work on someone else's browser:

http://forestandthetree.com/ojoblanco

**steji** · 08-11-2009, 07:03 PM

Actually, even if you set a z-index value "a ridiculously high number", the slide will crawl his way up to the top. It will take a longer time to, but eventually will be on top of all. That's because the img z-index value is incremented after every transition. The z-index of the top img, the one that will show after the transition is over, it has to be higher than the z-index of the old img.
I also have an menu over the slideshow (http://endoroptics.dekadv.com)and i ran into same issue: how to change the script to use only two z-index values (say 1 and 2)? Or to use a range of z-index values as imgArray.length starting from 0 or any given other value (but to know which value).
I've looked into the code... I'm not a javascript newbie (I like to think) but that's too much for me.
Any help will be appreciated.
L.E.
Now I've tried to decrease (crossobj.style.zIndex-- instead of crossobj.style.zIndex++) the z-index value. It seems that fade filter is applied to the top image that will fade in on top of the old img. So, decreasing the z-index value will result in no longer show the transition, just a quick swap of images. Now, this leads of an another possible solution: ability to choose which img to apply the fade filter (too many parameters, though) or an hard coding to that. But then the SS will bo to the bottom of the stack, other people will not be satisfied about it.
it remains the 2 values of z-index that the two images will use. the old img will have to have value 1. The new one will have to have value 2. When the transition is over, the new img will swap the z-index value of 2 to 1 and the value 2 will be freed for the next img.
Or just how I've put in words what I want from this script. To put it in coding... that's a little bit trickier.

**johnflanagan** · 01-02-2010, 07:23 AM

I also had this problem so many thanks for the suggestions which led me to using "position" and an easier css solution:

Code:

div#slideshow-z-index {
position:relative;
left:0px;
top:0px;
z-index:0;
}
div#menu-z-index {
position:relative;
left:0px;
top:0px;
z-index:1;
}

**paulusmaximus** · 07-02-2010, 12:46 PM

Sorry to resurrect this issue but I'm having similar problems and was wondering if someone could throw some light my way?

The following page has a header with drop-down menu and below, the ultimate fade-in. The menu goes over the slideshow without any issues after adding z-index. BUT, when I try to add another box which I want to go on top of the slideshow with text in it, it seems to go underneath the slideshow.

http://www.lautremonde.co.uk/2/interior_design/

I've got a div called 'screens' which holds the slideshow and I'm trying to put another block inside that div called 'interiors_hback' with the info in.

#screens {
position: relative;
left:0px;
top:0px;
z-index: 1;
}

#interiors_hback {
background-color: #FFF;
z-index: 9999;
}

Any help would be most appreciated!

thanks

**paulusmaximus** · 07-02-2010, 03:25 PM

Ok... have managed to sort it out.

If anyone's having similar issues you must add 'top:0;' in the css code for the block u want to place on top of the slideshow. Also I nested the slideshow and box divs in another div and set the position of that to relative and the box to absolute:

#interiors_hback {
width: 960px;
height: 180px;
position: absolute;
z-index: 9999;
top:0;
}

#screens {
width:960px;
height:640px;
z-index: 0;
}