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

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

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