I'm having a problem getting a particular CSS trick to work properly in internet explorer; it works fine in Firefox and other browsers. I would appreciate assistence with this, I'm really not sure what is up here.
If you copy the below to a HTML file and open it, then it should show three screenshots; hovering over a screenshot will overlay a larger version of the same. Except in IE, where the larger image is placed below the screenshot to the right, instead of above it. Can someone tell me what I'm doing wrong? Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
#screens img {
padding:0 6 6 0;
width:160;
height:100;
border:0;
}
#shot {
position:relative;
text-decoration:none;
float:left;
padding:0 10 15 0;
}
#shot span {
display:none;
}
#shot:hover span {
display:block;
position:absolute;
top:-5;
left:-85;
width:330;
background:#000;
color:#fff;
text-align:center;
font-style:italic;
padding:5 0 5 0;
z-index:100;
}
#shot span img {
width:320;
height:200;
padding:5;
}
#shot:hover span div {
padding:5 0 0 0;
text-align:center;
}
</style>
</head>
<body>
<div id="screens">
<a href="#" id="shot">
<img src="http://crystalshard.net/img/meta.png" name="pic">
<span><img src="http://crystalshard.net/img/meta.png" name="pz1"><div id="tx1">Caption</div></span>
</a>
<div id="extra">
<a href="#" id="shot">
<img src="http://crystalshard.net/img/meta.png" name="pc2">
<span><img src="http://crystalshard.net/img/meta.png" name="pz2"><div id="tx2">Text</div></span>
</a>
<a href="#" id="shot">
<img src="http://crystalshard.net/img/meta.png" name="pc3">
<span><img src="http://crystalshard.net/img/meta.png" name="pz3"><div id="tx3">More info</div></span>
</a>
</div>
</div>
</body>
</html>
Tested this with IE8 and it looks the same as in Firefox 3.6.17, the larger image is above the thumbnail.
I'm glad to hear that, but it does break in IE6 and IE7, and I was hoping that somebody could suggest a fix.
I tried to solve this issue but without any luck. It just made me really frustrated :-\.
Also, I got IE9 but it was still "broke"...
Breaks for me too, using IE 8 (8.0.6001.18702)
Maybe try adding a z-index for the a-element in hover state, not or not only for its child element:
#shot:hover {
z-index:100;
}
Adding this before "#shot:hover span" solved the issue for me.
You must have alot more than just TomatosInTheHead because that seems to be the solution Radiant needs!
Fixes the issue in IE9 too :).
Quote from: TomatosInTheHead on Fri 10/06/2011 09:46:35
Maybe try adding a z-index for the a-element in hover state, not or not only for its child element:
That did the trick. Thanks!