Is This A Z-Index Issue?

The problem is the Nivo slider in the center of the page. I can see the arrows on top of the slideshow images that allow you to navigate left or right, but they are no longer clickable. The same goes for the link within the caption shown on the last/fourth image.

Does this have something to do with the z-index or absolute positioning with the Nivo slider?

Any help would be greatly appreciated. Thank you!

LINK-
http://www.securehostserver.info/court/

Hi Todd. Try this:

#slider .nivo-prevNav, #slider .nivo-nextNav {z-index: 100;}

I have added those rules and it is still not working for me in Safari and Firefox.

I tested those styles in each browser and they work. I don’t see them in your style sheet yet. They have not actually uploaded.

My fault. I have moved the site to a new hosting plan about ten minutes ago. Here is the new URL. The prev and next arrow links are now working, but I cannot get the link inside the caption area on slide number four to work properly. Can you check out that?

NEW LINK-
http://www.andersoncountycircuitcourt.com

z-index is a scoped attribute, and is only relative to all elements in the same scope. position: absolute and position: relative create new scopes. So, if #slider has a lower z-index than the element that’s showing up in front of it and it is position: absolute or position: relative then it doesn’t matter what the z-index of the child elements are, you’ll need to change the z-index of the slider itself to get it and its children to be in front.

Try the same sort of thins:

#slider .nivo-caption {z-index: 100;}

Works great now! Thanks for helping me out. :slight_smile:

Yep, that’s the case here. Everything is inside the #slider div, which has a z-index of 99. I just set the arrow z-index to 100 to make sure it sat over that.

You’re welcome. :slight_smile:

Well, now I am back to my original issue. Ugh.

And this is the reason I had altered the z-index of the slider in the first place. The original issue was that the slider was on top of the dropdown menu and so I altered the dropdown menu to a z-index of 99 and that is when the slider elements stopped working. Can you tell me what z-index to add to my drop down menu so that it is on top of the slider but still allow the slider to work properly?

Hehe, no rest for the wicked!

#header-container {position: relative; z-index: 100;}

Fixed! I am still learning… Thanks for being patient!