css hover in IE

[derwent]

I am using a technique to display an image very small in the top of the screen then on hover of a link the image is shown full size in the correct area. This is to make it look as though the image is appearing but without the load time.

My script works great in FF but no image displays on hover in IE.

<style type="text/css">
a.rackethover img {display:block; position:absolute; width:1px; height:1px; border:0px; top:0px; left:0px;}
a.rackethover:hover img {display:block; position:absolute; top:240px; left:550px; width:150px; height:127px; border:0px;}
</style>

and in the body

<a href='/images/80.pdf' class='rackethover' target='_blank'>001<img src='/images/bf80.jpg' width='150' height='127' alt=''></a>

Can anyone see why IE is playing up?

 

[Vragabond]

According to Eric Meyer (

http://www.meyerweb.com/eric/css/edge/popups/demo2.html)

IE doesn't handle dynamic image resizing. So that could be one of your problems. Another could be an IE bug using the technique Eric came up with (although it refers to the span one that is used with text):

http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp

One way or another, have you considered doing it the way suckerfish menus do with the menu appearing -- move it from some -999em location to the location you want. That might work best.