Cannot get hover navigation working in IE8/9, works in FF/Chrome
Question
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.
<?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(); ?>
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 as well: 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!
EDIT:
Here is the final rendered HTML, as per request:
<!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>
</head>
<body>
<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> » <a accesskey="/" href="http://element17.com/index.php?level=collection&id=5">Constructs</a> » <a accesskey="/" href="http://element17.com/index.php?level=album&id=12">2010</a> » <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&id=87"> </a> <a id="next-button" href="http://element17.com/index.php?level=picture&id=96"> </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>© 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.</div></div>
1 answers
solution1
1 ACCPTED 2011-06-02 22:14:04
You currently have this as your css:
#prev-button:hover
IE doesn't recognize :hover or other pseudo classes on IDs/Classes. Change to this:
a:hover#prev-button
Likewise with your #next-button .
Also, you specified filter on the normal state of the link, but not on the :hover state. All in all this is what you need:
a:hover#prev-button, a:hover#next-button {
color:#aaa; opacity:.75; filter:alpha(opacity=75);
}
This should fix your IE problems :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.