I'm working on the navigation the navigation for an image gallery I'm working on, but have run into some problems. It works fine in Firefox and Safari, but doesn't work in IE6, IE7, and Opera, and I can't for the life of me figure out why. The previous link and next link appears when they hover over the right and left side of the picture. I think it might be a problem with z-index, and the two link pictures getting stuck under the image in the image gallery, but I'm not sure. Any and all help is appreciated. This is the code for the gallery, minus the two navigation pictures and the image for the gallery. <!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>Example</title> <style type="text/css" media="screen"> #test { margin:0; padding:0; position:relative; top:0; left:0; width:800px; height:640px; background-color: #000; } #nav{ position:absolute; left:0; top:0; z-index:999; width:100%; height:100%; } #Next,#Prev{ position:absolute; display:block; width:50%; height:100%; outline:none; top:0; } #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; } </style> </head> <body> <div id="test"> <div id="nav"> <a href="#" id="Prev"></a> <a href="#" id="Next"></a> </div> <img id="image" src="grass.jpg" alt="image" /> </div> </body> </html> Code (markup): .
I have an example here, but it seems to be getting corrupted somewhere in between me uploading the file and it getting downloaded.