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:
Code:
<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:
  1. 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.
  2. 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?