Simple Controls Internet Explorer 9 - Z Index issue

[faxon22]

1) Script Title:
Simple Controls Gallery
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm
3) Describe problem:
I have a simple controls gallery (two of them actually) at www.scottburrows.com. I have a hidden <div> menu which activates the video on the homepage. I got the z indexes fixed so it works with every browser except Internet Explorer 9. The hidden menu is still behind the gallery in IE9. Can anybody tell me what I'm missing?

I haven't changed anything with the simplegallery.js but here is the code on my page:

[CODE]
<div id="menu">
<a href="http://youtu.be/w39enrGEEXc?hd=1&amp;fs=1&amp;autoplay=1" id="video"> <i>Video</i></a>
<div id="simplegallery2"> </div>
</div>

And the CSS:
#video{
padding-top: 140px;
width:500px;
margin-left:110px;
}
#menu a {
position: absolute;
height: 70px;
width: 1000px;
margin-left:auto;
margin-right:auto;
top: 31px;
text-decoration: none;
z-index: 1002;
}
#menu a i {
visibility: hidden;
}

a#video { top: 195px;
}
[end code]

like I said, works fine in everything but IE. Any help would be much appreciated. Thanks,

[jscheuer1]

In IE the element with the link must have background in order to be clickable. Otherwise the mouse 'sees right through it'. Oddly though, we can give it a phony background image. Add this to the head of the page:


<!--[if IE]>
<style type="text/css">
#video {
background-image: url(not_a.gif);
}
</style>
<![endif]-->

That's it!

In an unrelated matter I noticed that there was some code that's no longer used that's causing a non-fatal error. It should be removed:


<!--home page custom JS-->
<link rel="stylesheet" type="text/css" href="/gallerystyle.css" />

<!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<!-- End Conditional Style -->

<script type="text/javascript" src="/motiongallery.js">

/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/

</script>
<!--image rotator-->

Additionally, jQuery appears twice on the page, and both are outdated versions. Change:


<script type="text/javascript" src="/jquery-1.2.6.pack.js"></script>

to:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

and get rid of the highlighted here:


<script type='text/javascript' src='http://scottburrows.com/wp-includes/js/l10n.js?ver=20101110'></script>
<script type='text/javascript' src='http://scottburrows.com/wp-includes/js/comment-reply.js?ver=20090102'></script>
<script type='text/javascript' src='http://scottburrows.com/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
<script type='text/javascript' src='http://scottburrows.com/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.4.pack.js?ver=1.3.4'></script>

[faxon22]

Wow, thanks John! Worked perfectly! And thanks for the extra advice as well. I had been playing around with a few different things and forgot to take that one out of there. For the last suggestion, it's a Wordpress plugin that is adding in those 4 lines so if I can figure out how to edit those, I'll take it out too. Still learning all of the WP tricks. Thanks again!

Adam