Forum Moderators: not2easy
I've got a few rules set up to stack screenshots using z-index and absolute positioning. I wanted to also set up a hover rule so when you put your mouse over the topmost picture it slides over to the right. It works fine in moz, but not IE. In IE, after the hover area becomes active, it moves to the left, so your mouse isn't over it anymore, then it flys right back, and loops. Im trying to do this using a left pad, I'm thinking perhaps it'd be better, instead of padding the div, to make it wider, and align the image to the right hand side of the div. I couldn't figure out how to do that. Anyways, any help would be greatly appreciated. Here is what I'm working with currently. It passes wc3 html/css validation.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>layers</title>
<STYLE TYPE="text/css">
.x { position: absolute; left: 100px; top: 0px; z-index: 4;}
.b { position: absolute; left: 85px; top: 5px; z-index: 3;}
.c { position: absolute; left: 70px; top: 10px; z-index: 2;}
.d { position: absolute; left: 55px; top: 15px; z-index: 1;}
a, A:link, a:visited, a:active {display:block;position:relative;top:0px;}
A:hover {display:block;position:relative;top:0px;left:0px;padding-left:90px;}
img {border-style: none;}
</STYLE>
</head>
<body>
<DIV CLASS=x><A href=inde2x.html><IMG src="pic.gif" alt=""></a></DIV>
<DIV CLASS=b><IMG src="pic.gif" alt=""></DIV>
<DIV CLASS=c><IMG src="pic.gif" alt=""></DIV>
<DIV CLASS=d><IMG src="pic.gif" alt=""></div>
<pre>
a, A:link, a:visited, a:active {color: #0000ff; text-decoration: none;position:relative;top:0;}
A:hover {display:block;color: 0001ff; font-family: Tahoma, Verdana; font-size: 11px; margin: 0px;position:relative;top:0;left:50;padding:0px;width:100}}
a, A:link, a:visited, a:active {position:relative;top:0;}
A:hover {display:block;position:relative;top:0;left:50}}
;border-style: outset;
border-color: blue;
border-width:5px
</pre>
</body></html>
[edited by: SuzyUK at 7:38 am (utc) on Aug. 9, 2005]
[edit reason] fixed smiley in code [/edit]
as mentioned in the earlier post, I think the link itself does not require any positioning, is there any particular reason you want to use relative positioning?
This code:
a, a:link, a:visited, a:active {display:block;}
a:hover {padding-left:90px;}
works fine in IE too.
Im trying to do this using a left pad, I'm thinking perhaps it'd be better, instead of padding the div, to make it wider, and align the image to the right hand side of the div.
You are actually padding not the div, but the link element itself, which is possibly the easiest way to go because IE does not support
:hoverHowever. not only is the relative positioning causing problems for IE, but if you do try to it using widths instead of left-padding, IE is losing the plot again..
e.g.
a, a:link, a:visited, a:active {display:block; width: 380px; text-align: right; /*background: #ffc;*/}
a:hover {width: 480px;}
that code displays the same sort of behaviour you are decribing unless you add in (uncomment) the background color, which I presume is no use ;).. and
background: transparent; so I'd say stick with your padding idea if that first bit of code works for you..
let us know how you get on...
Suzy
Thanks. That worked. I didn't realize thats all I needed. It was the relative positioning that was screwing it up, along with all the other useless bits. here is the link to the old thread incase anyone wanted to know. thanks again.
[webmasterworld.com...]
<script language="javascript">
function setZIndex(id, z_index) {
document.getElementById(id).style.zIndex = z_index;}
</script>
set up a number of layers
with incremental z-index ;
1,2,3,4,5
then gave
<img
onmouseover="setZIndex('img1','200');"
onmouseoout="setZIndex('img1','1');"
to each incrementally
<img
onmouseover="setZIndex('img2','200');"
onmouseoout="setZIndex('img2','2');" , ect
