View Full Version : Simple Controls Internet Explorer 9 - Z Index issue

03-01-2012, 03:02 AM
1) Script Title:
Simple Controls Gallery
2) Script URL (on DD):
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:

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

And the CSS:
padding-top: 140px;
#menu a {
position: absolute;
height: 70px;
width: 1000px;
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,

03-01-2012, 10:11 AM
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);

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');
<!-- 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

<!--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>


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

03-01-2012, 04:09 PM
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!