...

View Full Version : Prev/Next Link overlays - IE Not Working



Temujin_12
01-03-2010, 12:37 AM
Essentially, my question is about overlaying a "position: absolute;" div that is inside a "position: relative;" div, but I'll give the whole context.

Inside the "position:absolute;" div are <div>s, <a>s, and <img>s that float previous/next links over a rotating image slideshow that is done using the jQuery Cycle plugin.

Here's a link to the whole thing (all resources are absolute URLs so you can download/open in browser):
http://www.mediafire.com/?myaywy1ndyz


I'm using jQuery to dynamically create and overlay the wrapper divs, links, and images, so that this kind of slideshow can easily be created.

What it generates is essentially:


<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>JQuery Cycle Plugin - Example Slideshow</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto; overflow: hidden; zoom: 1; }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>

<!--[if lte IE 7]>
<style type="text/css">
div, ul { zoom: 1; }
</style>
<![endif]-->

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.73.js"></script>

[MY cycleHoverNav() JS FUNCTION HERE]

$(document).ready(function() { cycleHoverNav('#cycleDiv',
'cycleNavWrapper',
'http://i49.tinypic.com/1zlrbc2.png',
'http://i49.tinypic.com/34440mx.png',
{ fx: 'fade'}
) });
</script>
</head>
<body>
<center>
<div id="cycleNavWrapper" class="slideshow" style="border: medium none ; margin: 0px; padding: 0px; background-color: transparent; position: relative; height: 232px; width: 232px; z-index: 100;">
<div class="slideshow" id="cycleDiv" style="position: relative;">
<img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" />
<img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" />
<img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" />
<img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" />
<img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" />
</div>
<div/>
<div id="navLinkWrapper" style="width: 232px; height: 232px; position: absolute; top: 0pt; left: 0pt; z-index: 300;">
<div id="cyclePrevDiv" class="cycleNavDiv" style="position: relative; width: 48%; height: 232px; display: block; float: left;">
<a id="cyclePrevLink" class="cycleNavLink" href="#" style="padding: 0px 0px 0px 0pt; width: 100%; height: 232px; position: relative; float: left; display: none; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0px;">
<img border="0" align="left" src="http://i49.tinypic.com/1zlrbc2.png" style="border: medium none ; margin: 80% 0px 0px 15%; padding: 0px; background-color: transparent;"/>
</a>
</div>
<div id="cycleNextDiv" class="cycleNavDiv" style="position: relative; width: 48%; height: 232px; display: block; float: right;">
<a id="cycleNextLink" class="cycleNavLink" href="#" style="padding: 0px 0px 0px 0pt; width: 100%; height: 232px; position: relative; float: right; display: none; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0px;">
<img border="0" align="right" src="http://i49.tinypic.com/34440mx.png" style="border: medium none ; margin: 80% 15% 0px 0px; padding: 0px; background-color: transparent;"/>
</a>
</div>
</div>
</div>
</center>
</body>
</html>


... note that despite it not being shown here, jQuery has attached show()/hide() functions to the mouseover()/mouseout() events for the "cyclePrevDiv" and "cycleNextDiv" divs. Hovering over these divs causes the child "cyclePrevLink"/"cycleNextLink" to become visible and visa versa.

This works great in FF and I can see (using the IE developer toolbar) that the divs/links/images are all positioned correctly in IE 7 & 8 (don't care about IE 6). So the problem is CSS related, not jQuery related.

However with IE, there are two problems:

Hovering over the "cyclePrevDiv"/"cycleNextDiv" divs doesn't cause anything to appear. If I throw in an "alert()" command into the mouseover()/mouseout() jQuery event handlers I can see that the event is being fired.
If I manually set the "cyclePrevLink"/"cycleNextLink" links to be visible the link is only active over the image inside the link and not the dimensions specified by the link's CSS properties.


Any thoughts?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum