Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

ie7, z-index, and an unclickable button. would be grateful of enlightenment!

Discussion in 'Website Design Forum:' started by bamme, Mar 4, 2011.

  1. bamme

    bamme Senior Member

    hi everyone

    i wondered if there were any css/jquery gurus about (or even just those who know a little more than the basic knowledge i have..!) to see what they think of this prob I'm having with z-index, ie7 and a button which becomes unclickable.

    I said I'd try my hand at doing a couple of little bits on this mockup page for a colleague for learning purposes, it'd be cool to know what you'd do in this situ so i can learn..

    Regulatory Resources Group | RRG (this is the version with no conditional ie stylesheet so you all can see the problem in ie7)

    The 1st issue i noticed was with the jquery fade in/out black container holding white text, over the banner - the dropdown submenu, under navigation menu link "People", was appearing behind the fade in/out text box.

    For now I've fixed it by applying z-index attributes to the dropdown and it's parent elements (a bit messily perhaps.. feel free to have a look).

    This however does not work in ie7.

    To get around this I first tried adding "z-index:-1" to the black fade in/out container (#headertxt), which fixed the black box appearing over the dropdown fine, including on ie7.

    However this caused another problem - the purple "Read More" buttons within the fade in/out section stopped working - they became 'unclickable'. I figured this must be because I'd just added "z-index:-1" to it's containing div, #headertxt.

    I've kept this file here, which uses an ie7 conditional stylesheet to add that z-index:-1 rule, so you can see the read more button being unclickable:

    Regulatory Resources Group | RRG

    So i tried to then apply a different z-index to the read more button only, to no avail. I then tried wrapping it in a container with a z-index like this:

    <div style="z-index:10000000"><a class="readMore" href="<? echo $dir; ?>#" title="Read More">Read More</a></div>
    Didn't work :/

    So a standard ie7 fix I'd use won't work because of this read more button problem.

    Can anyone help?

    If anyone wants to have a proper look at everything please see

    (excuse the bloated css for the dropdown, sorry, i am a beginner.)
  2. Harry

    Harry Senior Member

    Okay I'm not suer if this will fix your exact problem but what you have to remember with z-index in IE7 is this:

    An img with z-index 9 inside a div with z-index 2 will still sit below a div with z-index 3. It works based on parents, rather than elements.

    3 is the highest element here:

    +----2----+   +----3----+| +--9--+ |   |         || |     | |   |         || |     | |   |         || +-----+ |   |         |+---------+   +---------+
  3. tbwcf

    tbwcf Active Member

    By default an elements position (css) will be
    z-index will only work on elements with position:relative/absolute/fixed

    So currently where you have:
    this will do nothing. make it
    and it will work. better still apply it to:
    then forget the z-index:-1 on your slideshow bit and both should work - the dropdown appear over the top of the slideshow and the read more button still work.

    Note: position:realtive; still behaves pretty much like the default position:static; (other elements on the page still respect it - where as they won't with absolute for example) - but it will also pay attention to the CSS properties - z-index / top / bottom / left / right

    *Also - avoid using stupidly high values for z-index! keep it sensible and managable - you shouldn't really need to go higher than 10 - doing so will just make things more confusing to read - lightbox type plugins will end up with content on top of their overlays and Opera will only respect z-index up to 99999 (I think) - not that you should ever need to go anywhere near that!
  4. bamme

    bamme Senior Member

    thanks so much both for the insightful replies - Harry your diagram really helped me get the concept of z-index. does the diagram/rules above just apply to ie or z-index in general?

Share This Page