Cannot get hover navigation working in IE8/9, works in FF/Chrome... Can anyone help?

Hi there, I am trying to get my photography portfolio website working correctly across all the major browsers (IE8, FF, Chrome), and so far it is operating perfectly in the latter two but some navigational elements do not appear in IE8 or 9 despite all my efforts.

You can see what I'm talking about here, for instance: http://element17.com/index.php?level=picture&id=88

The left- and right-most 100px of the image, when rolled over with the mouse, should display arrows that allow you to navigate to the previous and next images in the album, respectively. In Firefox and Chrome, these appear and operate as intended. In IE8/9, however, they will not display. All other hover information is displaying correctly.

Here is the PHP behind the page:

<?php plogger_get_header(); ?>

<div id="big-picture-container">

<?php if (plogger_has_pictures()) : while(plogger_has_pictures()) :

		plogger_load_picture();
		$picture_caption = trim(plogger_get_picture_caption());
		$detail_link = plogger_get_detail_link();
		$prev_link = plogger_get_prev_picture_link();
		$next_link = plogger_get_next_picture_link();
		
		if ($picture_caption != '' || !isset($picture_caption)); ?>
		
		<div class="picture-holder" style="width:<?php echo get_image_width(plogger_get_picture_id()); ?>;height:<?php echo get_image_height(plogger_get_picture_id()); ?>;">
		
		<div class="hovering" style="position: absolute;margin: 0px;padding: 0px;top: 0px;left: 0px;z-index: 1000;width:<?php echo get_image_width(plogger_get_picture_id()); ?>;height:<?php echo get_image_height(plogger_get_picture_id()); ?>;">
		
		<div class="exif-data">

		<?php $wallpath = "";
		$wallpath .= "plog-content/images/wallpaper/";
		$wallpath .= $picture_caption;
		$wallpath .= "Wide.jpg";

		if (file_exists($wallpath)) {
		echo "<span style='position:absolute; margin-top:1px;'><a href='plog-content/images/wallpaper/"; echo $picture_caption; echo "Wide.jpg'><img src='plog-content/images/wide.png' /></a></span><span style='position:absolute; margin-left:20px;'><a href='plog-content/images/wallpaper/"; echo $picture_caption; echo "Full.jpg' style='display:inline;'><img src='plog-content/images/full.png' /></a></span>";
		}
		$wallpath = ""; ?>
				
				<h2><?php echo $picture_caption; ?></h2>
				<?php echo plogger_get_picture_date(); ?><br />
				<div class="exif"><?php echo generate_exif_table(plogger_get_picture_id()); ?></div>
			</div>
<?php echo $prev_link; ?>
		<?php echo $next_link; ?>			
			<img class="photos-large" src="<?php echo plogger_get_picture_thumb(THUMB_LARGE); ?>" alt="<?php echo $picture_caption; ?>" /></div>

		</div>
		</div>
		</div>
	
		<?php endwhile; else : ?>

	<p>No such image</p>

	<?php endif; plogger_get_footer(); ?>

Open in new window


And here's the final rendered HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>City (Constructs, 2010) - Element17 Photography</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="imagetoolbar" content="false" />
	<meta name="keywords" content="City" />
	<meta name="description" content="" />
	<link rel="stylesheet" type="text/css" href="http://element17.com/plog-content/themes/diffuser/gallery.css" />
	<script type="text/javascript" src="http://element17.com/plog-content/themes/diffuser/dynamics.js"></script>
	<!--[if lt IE 8]>
		<style>
			/* this is a workaround for IE6/7 because they do not support inline-block correctly */
			.slides li { zoom: 1; display: inline; }
		</style>
	<![endif]-->
<script type="text/javascript" src="plog-includes/js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="plog-includes/js/jquery.dimensions.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>

<script type="text/javascript">
$(function() {
	$(document).ready(function() {
	if ($(window).width() >= 1480) {$('div#wrapper').css('width', '1470px'); }
	else {$('div#wrapper').css('width', '980px'); }
	});
    $(window).bind('resize', function() {
	if ($(window).width() >= 1480) {$('div#wrapper').css('width', '1470px'); }
	else {$('div#wrapper').css('width', '980px'); }
    }).trigger('resize');
});
</script>

<script type="text/javascript">
var minTime = 5000;
var maxTime = 10000;
$(document).ready(function() {
    $('.slideshow').each(function(ind) {
        $(this).cycle({
        timeout:(Math.random()*(maxTime-minTime)+minTime),
        speed:2500});
    });
});
</script>

 
</head>

<body>

<!-- Site-wide "header" - begins inside <body> and contains top-level containers -->

<div id="centering">

<div id="wrapper">

<div id="header"><table width="100%"><tr><td><a href="index.php"><img src="./plog-content/themes/diffuser/images/logo.png" alt="Element17 Photography" /></a></td><td align="right"><div id="breadcrumb-links"><a href="http://element17.com/index.php">Home</a> &raquo; <a accesskey="/" href="http://element17.com/index.php?level=collection&amp;id=5">Constructs</a> &raquo; <a accesskey="/" href="http://element17.com/index.php?level=album&amp;id=12">2010</a> &raquo; <span id="image_name"><strong>City</strong></span></div></td></tr></table></div>

<div id="main-container">
<div id="big-picture-container">

		
		<div class="picture-holder" style="width:631px;height:950px;">
		
		<div class="hovering" style="position: absolute;margin: 0px;padding: 0px;top: 0px;left: 0px;z-index: 1000;width:631px;height:950px;">
		
		<div class="exif-data">

						
				<h2>City</h2>
				March 20, 2010<br />
				<div class="exif">						Nikon D300, Tamron SP AF 17-50mm f/2.8 XR DiII VC @ 17 mm, f/9, 1/320 sec, ISO 200
</div>
			</div>
<a id="prev-button" href="http://element17.com/index.php?level=picture&amp;id=87">&nbsp;</a>		<a id="next-button" href="http://element17.com/index.php?level=picture&amp;id=96">&nbsp;</a>			
			<img class="photos-large" src="http://element17.com/plog-content/images/constructs/2010/20100320-dsc_5688.jpg" alt="City" /></div>

		</div>
		</div>
		</div>
	
		<div id="footer">

	<div id="link-back">The photography and design of element17.com is copyright <b>&copy; 2007-2011</b> by <b><a href="mailto:steve@element17.com">Steve Gaucher</a></b> and may not be reproduced/republished in any manner without prior consent.<br /><br /><span style='color:red;'>This site does not render correctly in Internet Explorer 8 or 9, due to non-support of web coding standards.<br />For a truer browsing experience, try using <a href='http://www.google.com/chrome'>Google Chrome</a> or <a href='http://www.firefox.com'>Mozilla Firefox</a>.</span></div></div> 

</div><!-- wrapper -->
</div><!-- centering -->
</body>
</html>

Open in new window


I apologize for the messy inline styles and such... I'm still attempting to clean some of this up but I don't believe any of that will be relevant. You can see the stylesheet here: http://www.element17.com/plog-content/themes/diffuser/gallery.css; I apologize for it as well. :\

Can anyone see why this might be happening? I have played with z-indices, tag order, and everything I can think of and I can't imagine why this is happening.

Thanks everyone!
SR_TechAsked:
Who is Participating?
 
imantasCommented:
It seems that IE doesn't catch onmouseover event if the element doesn't have content at that place you moved your mouse over. Content can be either text, background or any other element. Because you insert background only when mouse is over, it doesn't catch that event. Replace your "#prev-button" and "#next-button" with these styles:

#prev-button{
position:absolute;
  width: 100px;
  top:0px;
  bottom:0px;
  display: block;
  margin:auto 0;
  left: 0px;
  float: left;
  background: #111 url('arrow-lf.png') no-repeat 50% 50%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: pointer;
  color: #AAA;
}
#next-button{
position:absolute;
  width: 100px;
  top:0px;
  bottom:67px;
  display: block;
  margin:auto 0;
  right: 0px;
  float: right;
  cursor: pointer;
  background: #111 url('arrow-rj.png') no-repeat 50% 50%;
  filter: alpha(opacity=0);
  opacity: 0;
  color: #AAA;
}
#prev-button:hover, #prev-button:visited:hover {
	filter:alpha(opacity=75);
	opacity:.75;
}
#next-button:hover, #next-button:visited:hover {
	filter:alpha(opacity=75);
	opacity:.75;
}

Open in new window

0
 
SR_TechAuthor Commented:
Right on!

Thanks very much, I've been puzzling over this for weeks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.