SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: z index?

  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    z index?

    I just added a parallax to this site and since then the tabs ( jscript ) have stopped working. I think it maybe to do with the z-index but I can't find out what or where it should go. I've tried in a few places but no joy.

    Any ideas?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The tabs seem to be working for me. Is this a specific browser issue or am I looking at the wrong thing?

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,613
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    hantaah, I can't really tell what is not working. Almost everything seems to function "as expected" in Firefox. The :hover background-color in the Gallery drop downs is a little wide, but that's all I see. What browser are you using? You may need to post screen shots comparing the expected/desired behavior to the "bad" behavior.

  4. #4
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    yea I managed to get the tabs working - it was to do with the z-index however the problem is still on the gallery. It does not jump when you hover over it or show the enlarge or view symbols but the very last one does see here: http://www.organicwebdesigns.co.uk/html-emails/

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    I'm sure we've been here before, but you've got several versions of the jquery library on that page, where you should only have one, and the fancybox script comes before the library, rather than after it, in the source order. Anything that depends on jquery must come after the library in the source order.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    For z-index to work the element needs to be positioned. Your wrapper is under the background above and therefore the elements are not clickable.

    Add this:

    Code:
    
    #wrapper2 {
        position: relative;
        z-index: 6;
    }
    You should address the problems Ralph pointed out anyway

  7. #7
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I guess I'm shying away from the issues ralph has mentioned as I just can't seem to find what I need to fix it. I can see the issues on the source code but I can't find it in the php files in wordpress. I've looked in header.php but I can only see one link for jquery but that about it.

    I put the wrapper code and that's sorted it otherwise confused.com on the other issues. Also I was wondering why it doesn't work when locating the wrapper id and adding the possition: relative yet adding all your code seperatly to the bottom of the sheet works.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hantaah View Post
    I've looked in header.php but I can only see one link for jquery but that about it.
    How did you add things like fancybox and the parallax code to your pages? I guess you need to dig in to those parts and tell them what to insert and what not to.

    I may have been wrong in something I sadi earlier: I can't see the fancybox script above the first jQuery file now. Either it's gone now, or I mistook the fancybox CSS file for a JS file. Sorry about that.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hantaah View Post
    Also I was wondering why it doesn't work when locating the wrapper id and adding the possition: relative yet adding all your code seperatly to the bottom of the sheet works.
    It should have worked in the original rule unless you had caching issues or something going on. I couldn't see any over-rides in the css so it should have worked in the original rule - unless you made a typo.


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
  •