Andy Harrison wrote:
> Weird - also, now in IE the large images stay shown even when you're
> no longer hovering. Sorry to say I've no idea why... :-/
>> www.teerthyatri.com
IE6 (at least) gets "locked up" on 'position: relative'. There are too
much styling for the wanted effect in there.
The following is tested in Firefox 1.5.x & 2.x, Opera 9.x, Safari 2.x,
IE6 and IE5.2/Mac...
/*Zoom Pics*/
.pic a.p1:link,.pic a.p1:visited {
display: block;
position: static;
}
.pic a.p1:hover {
position: relative;
}
.pic a.p1:link .large, .pic a.p1:visited .large {
display: none;
position:absolute;
top:-100px;
left:50px;
width:450px;
height:300px;
border: solid 1px #000;
}
.pic a.p1:hover .large {
display: block;
}
.pic {
float:left;
width:150px;
}
.pic a img {
border:0;
padding: 25px 0 0 25px;
}
.pic a .large {
padding: 0;
}
.pic p {
text-align:center;
margin-top:0;
font-variant:small-caps;
font-weight:700;
}
...and contains all styles needed for a stable effect.
I have more or less copied the visual effects from the original, as seen
in the good browsers.
The "trick" for IE6 is that 'position: relative' is switched on :hover,
and switched back to 'position: static' once the mouse-pointer leaves.
That also solves the stacking-problems.
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
