troubleshooting Question

z-index / transparent background problem: menu items are visible but not clickable

Avatar of Eric Bourland
Eric BourlandFlag for United States of America asked on
CSS
5 Comments1 Solution269 ViewsLast Modified:
Hi experts. I've been working on this one for a few hours and need some help now.

The menu items (Home, Author, Press / Articles, etc) are visible, but not clickable, on this page:

http://thethirdindustrialrevolution.com/index2.cfm

When I take away <div id="opticbackground">, then the menu items are clickable. So the problem can be isolated to <div id="opticbackground">.

<div id="opticbackground"> has z-index: -1.

The menu items are contained with <ul id="navlist">, which has z-index:2, with a transparent background. So, shouldn't the menu items be clickable, since <ul id="navlist"> stacks higher than <div id="opticbackground">?

What am I missing?

Thanks for any advice. Relevant code noted below.

Eric

HTML:

<body>

<div id="opticbackground"><!-- blue fiber optic / world map background -->

<div id="grunge"><!-- stony "grunge" background along top of page --></div>

<ul id="navlist"><!-- this is a CSS image sprite, with rollovers from sprite images -->
    <li id="navHome"><a href="http://www.thethirdindustrialrevolution.com/">Jeremy Rifkin Third Industrial Revolution Home</a></li>
    <li id="navAuthor"><a href="http://www.thethirdindustrialrevolution.com/pages/About-Jeremy-Rifkin.cfm">Jeremy Rifkin Third Industrial Revolution Author</a></li>
    <li id="navPress"><a href="http://www.thethirdindustrialrevolution.com/press.cfm">Jeremy Rifkin Third Industrial Revolution Press</a></li>
    <li id="navBlog"><a href="http://www.thethirdindustrialrevolution.com/blog.cfm">Jeremy Rifkin Third Industrial Revolution Blog</a></li>

    <li id="Facebook"><a href="http://www.facebook.com/jeremy.rifkin">Jeremy Rifkin Third Industrial Revolution on Facebook</a></li>
    <li id="Twitter"><a href="http://twitter.com/#!/JeremyRifkin">Jeremy Rifkin Third Industrial Revolution on Twitter</a></li>
    <li id="YouTube"><a href="http://www.youtube.com/foetjr">Jeremy Rifkin Third Industrial Revolution on YouTube</a></li>
    
    <li id="BuyTheBook"><a href="http://www.amazon.com/Third-Industrial-Revolution-Lateral-Transforming/dp/0230115217/">Jeremy Rifkin Third Industrial Revolution Buy The Book</a></li>
</ul>

Style sheet:

/********************************************
   HTML ELEMENTS
********************************************/ 

html	{
margin:0;

}

body {
	margin:0 auto;
	padding:0;
	background: #000 url(/img/crosshatch.gif) repeat-x top left;
	}

/* ----- blue fiber optic / world map background ----- */
#opticbackground	{
	background: url(/img/fiberOpticWorld.gif) no-repeat top center;
	position:absolute;
	z-index:-1;
	width:100%;
	height:180%;
}

/*stony "grunge" background along top of page*/
#grunge	{
	width:100%;
	height:282px;
	background: url(/img/grunge.gif) repeat-x;
	position:absolute;
	top:0;
}

/* NAVIGATION; with rollovers from CSS sprite
----------------- */
#navlist { 
        background: url(http://thethirdindustrialrevolution.com/test/header.png);
        width:1008px; 
        height:390px; 
        margin:0 auto; 
        padding:0;
		position:relative;
		z-index:2;
}
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros