View Full Version : IE keeps displaying the image

01-27-2005, 06:02 PM
This is a website I've made for one of my clients. I thought it would be cool if the menu had some hover effect. So I did it with CSS (of course) and it works in all browsers, except IE. Is there a way to make the images disappear when you stop hovering the menu?


01-28-2005, 09:33 AM
Not really, without some weird trickery. There's no "a:unhover" in CSS. The tiniest smattering of javascript ought to sort it out though.

ps - change (c) to © for extra joy points ;)

01-28-2005, 09:57 AM
I don't see any reason why it shouldn't work; the :hover state is only active when the link is, well, hovered over; as soon as the mouse leaves it, the normal unhovered state applies again.
I didn't go over your styles in detail since you insisted in using wordpad or something to create your style sheet with and my default editor is notepad, which shows wordpad files like a long string of text with little blocks inbetween, but I'm sure your rules are at fault.


I saved the CSS file and opened it in Wordpad; try to move all the properties in the "#menu a:hover img" rule to the "#menu a img" rule except the "display: block" and only toggle the display property.

01-28-2005, 10:12 AM
It's no code error, it's an IE issue. It doesn't handle changing the display properties too well.

Here's where I learned that: http://www.meyerweb.com/eric/css/edge/popups/demo2.html

The page uses the same trick...looks like there's not much you can do here. Maybe a background image and some padding shift?

01-28-2005, 10:23 AM
Heh... you beat me, Richard; I need to start typing faster.
Stupid IE... better use Eric's solution, then...

01-28-2005, 10:48 AM
Sorry; I should have been more explicit instead of just assuming the first post was about the IE issue.

01-28-2005, 11:48 AM
Stupid IE... better use Eric's solution, then...
I didn't see a solution on his site, did he post one?

Well, even if he didn't, I did... since we're using position:absolute anyway, why not just throw the initial image off of the screen?


Should work...

01-28-2005, 01:30 PM
div#links a img {height: 0; width: 0; border-width: 0;}
div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}
Eric sets the image's dimensions to 0; this is supposed to fail in IE5.x/win, though. It worked on IE6.0/win, which leaves the images when the display-toggle trick is used.

What about a span with a background image, non-tiling, that get shifted out of vision?

01-28-2005, 10:17 PM
Thanks everyone, for the help!!