CSS disjointed rollovers

So, I've been playing with CSS-based disjointed rollovers. I've got it working in everything I have available to me: Windows XP IE6, IE5.5, IE5.1, Firefox, Opera 8, Netscape 7 and Mac OSX Firefox, Safari 2.0 and (holy crap, yes it does!) IE5.2.

Once I was successful in getting it to work in all those browsers, I decided to "take it up a notch". I wanted to place the disjointed rollover (which contains an absolutely positioned element) within a relatively positioned div.

Now, I know this is possible. And when I tested it - it workes - yet again - in everything I've got *except* all versions of IE. When I place this absolutely positioned element within the relatively positioned div, the hover attribute ceases to work in IE.

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="Copyright 2005" />
<meta name="author" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<style type="text/css" media="screen">
/*\*//*/
@import "ie5mac.css";
/**/
* {
margin:0;
padding:0;
border:0;
z-index:0;
}
body {
text-align:center;
background-color:#CCC;
}
#content {
position:relative;
margin:10px auto;
width:500px;
text-align:left;
border:solid 1px #000;
padding:20px;
background-color:#FFF;
}
img {
border:solid 2px #CCC;
}
span img {
border:none;
}
a, a:link, a:visited, a:hover {
border:none;
text-decoration:none;
}
span {
display:none;
}
a:hover span {
position:absolute;
left:100px;
top:100px;
width:130px;
height:122px;
display:block;
}
</style>
</head>
<body>
<div id="content">
<div id="nav">
<a href="#"><img src="link1a.jpg" width="52" height="49" alt="" />
<span><img src="link1.jpg" width="130" height="122" alt="" /></span></a><br />
<a href="#"><img src="link2a.jpg" width="52" height="49" alt="" />
<span><img src="link2.jpg" width="130" height="122" alt="" /></span></a><br />
<a href="#"><img src="link3a.jpg" width="52" height="49" alt="" />
<span><img src="link3.jpg" width="130" height="122" alt="" /></span></a><br />
<a href="#"><img src="link4a.jpg" width="52" height="49" alt="" />
<span><img src="link4.jpg" width="130" height="122" alt="" /></span></a>
</div>
</div>
</body>
</html>

Now, as I said, this code works in everything I've got *except* IE. If you remove the #content div (and therefore, the relative positioning), then it works again in IE.

So what is it abou what I'm trying to do that suddenly negates the ":hover span" from becoming visible? I've tried changing the z-index, but to no avail. Anyone have any ideas?

CSS disjointed rollovers

mixing absolute and relative positions result in hover not functioning

doodlebee

doodlebee

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week