CSS Images and Layers

Need help with image layering and a mouse over

[phpmattk]

Hello gurus,

I am trying to write a css to stack screenshots with layers and absolute positioning. Then when you put the mouse over it, the top image slides over, allowing you to see what is below.

The problem is, it doesn't work in correctly in IE. If you put your mouse over the div containing the picture, it moves the div 30 pixels to the left, so your mouse isn't 'over' it anymore, so it flys back, then your mouse is over it. and it reapeats, causing a really tripped out effect. In moz i was able to fix it by setting the a:hover to a block style display and setting the width. This fix doesn't work in IE. Any ideas?

[edited by: jatar_k at 12:03 am (utc) on Aug. 8, 2005]
[edit reason] no personal urls thanks [/edit]

[phpmattk]

You can check it out at ooops sorry no URLs : see TOS #13 [WebmasterWorld.com]

Also, here is the code:

.x { display:block; 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:0;}
A:hover {display:block;position:relative;top:0;left:0;padding-left:30; border-color: blue;border-style:dashed;border-width:3;}}

<DIV CLASS=x><A href=inde2x.html><IMG src="pic.gif" border=0></a></DIV>

<DIV CLASS=b><IMG src="pic.gif"></DIV>

<DIV CLASS=c><IMG src="pic.gif"></DIV>

<DIV CLASS=d><IMG src="pic.gif"></div>

[edited by: SuzyUK at 7:24 am (utc) on Aug. 8, 2005]

[SuzyUK]

Hi phpmattk and Welcome to WebmasterWorld!

First off, have you validated your HTML [validator.w3.org] and CSS [jigsaw.w3.org] there could be some malformed markup causing the confusion?

Another thing to check is what DTD (Doctype) you are using if any, if you're using one without a URL, or not using one at all, this will mean the page is rendering in "Quirks Mode" which could be an issue here (In IE) as you are using padding to "move" the div over. See Quirks Mode vs. Standards Mode [webmasterworld.com] for more information on Doctypes.

in post #2 there is some unnecessary code for the link. It should need

display: block

set on it to make it fill it's parent divs size, then the padding itself along with a Strict Rendering Doctype should be enough to make the hover stay "active" over that 30px gap. The link shouldn't need any further positioning.

Suzy

[tedster]

Note - continued in a new thread:

[webmasterworld.com...]