Possible z-index issues causing slider transition bug

[rjmccollam]

I am having some trouble that I assume is being caused by z-index, but not sure how to correct it. First let me explain the reason it is coded the way it is. I have two absolutely positioned elements so that I can send the navigation behind the slider background image (something I can’t do if I apply the background image to the actual slider div).

As a result the first image of the slider is completely hidden and the image transitions only transition into themselves and not out of the previous image…if that makes sense.

I have my developer site at http://test.topekalasikcenter.com/secure/ for you to see what is happening.

I am using the nivo slider and unfortunately did not get a lot of help from their support forum so I brought it to the community that has always helped in the past.

[joshuanhibbert]

Works fine for me in Chrome.

[rjmccollam]

hmmm that is weird. It does it for me in every browser on both my OS X machine at home and my Windows machine at work.

The slider “works” just fine, but the transitions should transition from one image to another and not from white to an image. Here is an example of it working correctly – http://www.robsranch.org/. Maybe this will help better explain the difference.

[joshuanhibbert]

Right, so obvious now, can’t believe I missed it!

I’m not sure I understand why you need that second element?

[rjmccollam]

Without the second element I cannot get the slider nav behind the shadow of the slider background.

[joshuanhibbert]

Simplest solution would be to remove the white from the sprite. Use a transparent PNG and your problem is solved.

[Author]

Posts