I was making a image gallery for a website, and wanted to have navigation similar to lightbox without actually using the lightbox javascript.
After a bunch of tinkering, I got it working in Firefox and Safari, but to my dismay it won't work in internet explorer 6,7 and opera.
The problem is that the nav, next, and prev divs are getting stuck behind the image in the gallery. You can see that they are because if you remove the image code from the page, the hover navigation works just fine over the black background.
Now obviously this appears to be a z-index issue, but I have spent hours meddling with different z-index values and changing the code but have gotten no where.
I have provided an example of the problem in a zip attachment. Only thing to note is that it is a very simplified version, as I have removed any extra code to make the problem easy to see. The blue.gif is a replacement for the image in the gallery, as any of the images in the gallery would have been too large to fit in the file cap for uploads.
I am at a loss as to how to fix this, I would be ecstatic if anyone could help me.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
#test {
position:absolute;
width:800px;
height:640px;
background-color: #000;
}
#nav{
display: inline;
width:100%;
height:100%;
}
#Next,#Prev{
position:absolute;
width:50%;
height:100%;
outline:none;
z-index: 999;
}
#Next{right:0;}
#Prev{left:0;}
#Next:hover{
background:transparent url(next.gif) no-repeat 100% 30%;
}
#Prev:hover{
background:transparent url(prev.gif) no-repeat 0% 30%;
}
#image{
display:block; /* fixes ie6 display error */
}
</style>
</head>
<body>
<div id="test">
<div id="nav">
<a href="#" id="Prev"></a>
<a href="#" id="Next"></a>
</div>
<img id="image" src="blue.gif" alt="image" />
</div>
</body>
</html>
|
