Hover Navigation Doesn't Work in IE8

**NaOH** · 16 Feb 2011, 08:54 PM

Hi everyone,

I'm having some trouble getting my website (http://www.element17.com) to behave identically across the most popular web browsers. My reference browser is Chrome, so viewing it in Chrome you can see how it's supposed to look.

In IE8, the site looks perfect (other than no rounded corners, but I know that doesn't work and I'm unwilling to fiddle around with hacks to get what I consider to be a triviality to work in a browser soon to be replaced), but on the actual image pages (http://www.element17.com/index.php?level=picture&id=75 for example), the next and previous picture links do not appear when hovering over the left and right sides of the image. You can see the expected behaviour in Chrome or Firefox.

Here's the relevant PHP+HTML/CSS:

Code:

<?php plogger_get_header(); ?>

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

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





	<?php while(plogger_has_pictures()) : // equivalent to the Wordpress loop ?>

		<?php plogger_load_picture();
		// set variables for the 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();
		?>

		<?php if ($picture_caption != '' || !isset($picture_caption)); ?>
		<!--<h2 class="date"><?php echo plogger_get_picture_date(); ?></h2>-->

		<?php // generate XHTML with picture and link to full raw picture ?>

		<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 id="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;'>";
echo "<a href='plog-content/images/wallpaper/"; echo $picture_caption; echo "Wide.jpg'><img src='plog-content/images/wide.png' /></a>";
echo "</span>";
echo "<span style='position:absolute; margin-left:20px;'>";
echo "<a href='plog-content/images/wallpaper/"; echo $picture_caption; echo "Full.jpg' style='display:inline;'><img src='plog-content/images/full.png' /></a>";
echo "</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>

		<!--<p id="picture-description"><?php echo plogger_get_picture_description(); ?></p>-->
		
		<!--<div id="exif-toggle-container"><div id="exif_toggle"><?php echo $detail_link; ?></div></div>-->

		

		<!--<div id="comment-section"><?php echo plogger_display_comments(); ?></div>-->
		
		</div>
	
		<?php endwhile; ?>

	<?php else : ?>

	<p>No such image</p>

	<?php endif; ?>

<?php plogger_get_footer(); ?>

Code:

* {
	margin: 0;
	padding: 0;
}
html{
	background: #efefef url('images/stripe.png');
	overflow-y:scroll;
}
body {
	margin: 0;
	padding: 0;
}
img {
	border: 0;
}
a:link, a:visited {
	color: #888;
	text-decoration: none;
}
a:hover {
	color: #AAA;
}
a:active {
	outline:none;}
#centering {
	text-align: center;
	margin: 10px 0 0;
}
#wrapper {
	margin: 0 auto 25px;
	padding: 0px;
	width: 980px;
	/* border: 4px solid #888; */
	background: url('images/trans.png');
	font: 76% "Lucida Sans",Verdana,"Trebuchet MS",Geneva,Arial,Helvetica,SunSans-Regular,sans-serif;
	text-align: left;
	-moz-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border-radius: 5px;
		-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
	-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
	box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}
#header {
background: url('images/header_back.png');
padding: 5px 10px 5px 10px;
color:#666;
border-bottom:1px solid #666;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
	-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
	-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
	box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
}
#footer {
	background: url('images/header_back.png');
	color: #666;
	clear: both;
	margin: 10px 0 0 0;
	padding: 10px;
	border-top:1px solid #666;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
	-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.8);
	box-shadow: 3px 3px 10px rgba(0,0,0,0.8);

}
#gallery-name {
	color: #888;
	font-size: 18px;
	font-weight: bold;
}
#main-container {
padding-top:10px;
}
#breadcrumbs {
	color: #fff;
	clear: both;
	margin: 10px 0 0;
	padding: 0 25px 0 25px;
	font-size: 1.1em;
	min-height: 20px;
}
#breadcrumb_links {
	float: left;
	margin: 0;
	padding: 0;
}
#ac-container {
	clear: both;
	margin: 0;
	padding: 0;
}
.exif{
margin-top:8px;
color:#555;
font-size:10px;
}
#thumbnail-container, #big-picture-container {
	clear: both;
	margin: 0;
	padding: 0;
}
#collections {
	text-align: left;
	margin-left:10px;
}
.collection {
	padding: 10px 0;
	float: left;
	width: 100%;
}
.collection img {
	margin:0 auto;
	display: block;
}
.collection p {
	margin: 4px 0 0 0;
	line-height: 1.5em;
}
.collection img:hover {
/*	background: #A0B7C9;
	border: 1px solid #38c; */
}
#pagination {
	height: 1.4em;
	width: 100%;
	padding: 10px 0 0;
	font-size: 1.2em;
}
#inner_wrapper {
}
h2 {
	padding: 0;
	color: #888;
	font-size: 1.4em;
	font-weight: 700;
}
#picture-caption {
	font-size: 1.4em;
	text-align: center;
	margin: 6px 0;
}
.date {
	padding: 0 0 2px 0;
	text-align: center;
	font-size: 1.1em;
	font-weight: 400;
	letter-spacing: 1px;
	color: #A0B7C9;
}
#prev-button{
position:absolute;
  width: 100px;
  top:0px;
  bottom:0px;
  display: block;
  margin:auto 0;
  left: 0px;
  float: left;
}
#next-button{
position:absolute;
  width: 100px;
  top:0px;
  bottom:67px;
  display: block;
  margin:auto 0;
  right: 0px;
  float: right;
}
#prev-button:hover, #prev-button:visited:hover {
  background: #111 url('images/arrow-left.png') no-repeat 50% 50%;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
	color: #AAA;
  cursor: pointer;
}
#next-button:hover, #next-button:visited:hover {
  background: #111 url('images/arrow-right.png') no-repeat 50% 50%;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
	color: #AAA;
  cursor: pointer;
}
.picture-holder {
	clear: both;
	text-align: center;
	overflow:hidden;
	position:relative;
	margin:0 auto;
	-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 10px rgba(0,0,0,0.5);

}
.thumb-holder {
	position:relative;
	text-align: center;
	overflow:hidden;
	float:left;
	width:475px;
	height:150px;
	margin:0 10px 10px 0;
	-moz-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
}
#hovering:hover .exif-data{
	text-align:right;
	display: block;
	background: #111;
	filter:alpha(opacity=75);
	opacity:.75;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
	color: #AAA;
	position: absolute;
	bottom: 0px;
	right: 0px;
	padding: 5px;
}
.picture-holder .exif-data, .thumb-holder .exif-data{
	display:none;
}
#picture-description {
	margin: 4px 0;
	text-align: center;
}
#no-pictures-msg {
	margin: 0 0 200px;
	padding: 80px 0;
	text-align: center;
}
.errors {
	width: 500px;
	margin-bottom: 15px;
	border-bottom: 1px solid maroon;
	border-top: 1px solid maroon;
	border-left: 1px solid maroon;
	border-right: 1px solid maroon;
	padding: 8px 8px 8px 28px;
	background: #FCC url('../../../graphics/x.gif') no-repeat 5px 8px;
}
div.large-thumb-toolbar {
	padding: 15px 0;
	text-align: center;
}
div.large-thumb-toolbar a {
	padding: 0 4px;
}
.photos-large {
display:block;
margin:0 auto;
}
div.slides {
	margin: 0;
	padding: 0 0 10px 10px;
	color: #fff;
}
.thumbnail p {
	padding: 0 6px;
	margin: 4px 0 0 0;
	line-height: 1.2em;
	height: 2.5em;
	overflow: hidden;
}
#link-back {
	clear: both;
	margin: 0;
	padding: 0;
	display: block;
	font-size: 11px;
	text-align: center;
}
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */

I apologize for the messy CSS as well...

Thanks very much everyone!

**Wickham** · 17 Feb 2011, 02:59 AM

I found that IE7 didn't show the arrows on hover, so these edits get IE7 working and I expect IE8 will be OK:-
CSS edits:-

Code:

#image { position: relative; width: 631px; height: 950px; background: 
#aaa; } /*new style*/

#prev-button{ background: url('images/arrooow-left.png') no-repeat;
position:absolute; height: 600px; 
  width: 100px;
  top:100px;/*0px;*/
  /*bottom:0px;*/
  display: block;
  /*margin:auto 0;*/
  left: 0px;
  /*float: left;*/ z-index: 100;
}
#next-button{ background: url('images/arrooow-left.png') no-repeat;
position:absolute; height: 600px;
  width: 100px;
  top:100px;/*0px;*/
  /*bottom:67px;*/
  display: block; 
  /*margin:auto 0;*/
  right: 0px;
  /*float: right;*/ z-index: 100;
}
#prev-button:visited, #prev-button:hover {
  background: #111 url('images/arrow-left.png') no-repeat 50% 50%;
	/*filter:alpha(opacity=75);*/
	opacity:.75;
	/*-ms-filter: 
"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; */ /*--IE 8 
Transparency--*/
filter:alpha(opacity=75);
	color: #AAA;
  cursor: pointer; z-index: 100; 
}
#next-button:visited, #next-button:hover {
  background: #111 url('images/arrow-right.png') no-repeat 50% 50%;
	/*filter:alpha(opacity=75); */
	opacity:.75;
	-ms-filter: 
"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 
Transparency--*/
filter:alpha(opacity=75);
	color: #AAA;
  cursor: pointer; z-index: 100;
}

HTML:-

Code:

...................Nikon D300, Micro-Nikkor AF-S 105mm 
f/2.8 VR @ 105 mm, f/3, 1/4000 sec, ISO 200
</div>
			</div>

                        <div id="image"><!--extra div-->

<!--<a id="prev-button" 
href="http://www.element17.com/index.php?level=picture&amp;id=74">&
nbsp;</a>		
<a id="next-button" 
href="http://www.element17.com/index.php?level=picture&amp;id=427">
&nbsp;</a>-->

<img class="photos-large" 
src="images/20090801-20090801-dsc_3309.jpg" alt="Begrimed" />

<a id="prev-button" 
href="http://www.element17.com/index.php?level=picture&amp;id=74">&
nbsp;</a>
		
<a id="next-button" 
href="http://www.element17.com/index.php?level=picture&amp;id=427">
&nbsp;</a>

                        </div><!--extra </div>-->

</div>

I found taht I had to add a background-image to the #prev-button and #next-button styles but as you don't want to see it in th enormal state I had to mis-type the url. Display: none would hide the hover state so I had to disable the image in the normal state.

I altered the filter order so that the -ms-filter style is before the filter style.

You can't have #prev-button:visited:hover

Thread: Hover Navigation Doesn't Work in IE8

Thread Tools

Hover Navigation Doesn't Work in IE8

Similar Threads

Why doesn't it work?

Posting Permissions