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

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:

HTML:
<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

http://www.ameliealden.com/adamsproject/Archive.zip

(excuse the bloated css for the dropdown, sorry, i am a beginner.)
 
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:


Code:
+----2----+   +----3----+| +--9--+ |   |         || |     | |   |         || |     | |   |         || +-----+ |   |         |+---------+   +---------+
 
By default an elements position (css) will be
position:static;
z-index will only work on elements with position:relative/absolute/fixed

So currently where you have:
#nav-container ul#nav {
z-index:1000;
}
this will do nothing. make it
#nav-container ul#nav {
z-index:1000;
position:relative;
}
and it will work. better still apply it to:
#nav-container {
z-index:1000;
position:relative;
}
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!
 
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?
 
Back
Top