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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SR_TechAuthor Commented:
Right on!

Thanks very much, I've been puzzling over this for weeks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.