SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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/
    Todd Temple > T2 Design

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi Todd. Try this:

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

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have added those rules and it is still not working for me in Safari and Firefox.
    Todd Temple > T2 Design

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Todd Temple > T2 Design

  6. #6
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi Todd. Try this:

    Code:
    #slider .nivo-prevNav, #slider .nivo-nextNav {z-index: 100;}
    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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Try the same sort of thins:

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

  8. #8
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works great now! Thanks for helping me out.
    Todd Temple > T2 Design

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Michael Morris View Post
    z-index is a scoped attribute, and is only relative to all elements in the same scope.
    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.

    Quote Originally Posted by Tod Temple
    Works great now! Thanks for helping me out.
    You're welcome.

  10. #10
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Todd Temple > T2 Design

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hehe, no rest for the wicked!

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

  12. #12
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed! I am still learning... Thanks for being patient!
    Todd Temple > T2 Design


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •