Z index?

HTML & CSS
1

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

The tabs seem to be working for me. Is this a specific browser issue or am I looking at the wrong thing?

3

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

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

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

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:




#wrapper2 {
    position: relative;
    z-index: 6;
}

You should address the problems Ralph pointed out anyway :slight_smile:

7

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

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

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.