asked on

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

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;
}

Open in new window

Hagay Mandel

I fail to see the problem.

Eric Bourland

ASKER

HagayMandel:

Holy cow. I just realized. The problem exists only in MSIE 9.

Rats. =)

Any idea how I can fix this in MSIE 9? Thank you for your help.

Eric

ASKER CERTIFIED SOLUTION

Kiran Sonawane

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Eric Bourland

ASKER

sonawanekiran: looks like that is working. I'm going to run a few more tests, but: nice catch. =)

Eric Bourland

ASKER

sonawanekiran, thanks for this. Nice solution! Take care.

Eric