Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Aug 2004
    Location
    The Netherlands
    Posts
    211
    Thanks
    0
    Thanked 1 Time in 1 Post

    IE keeps displaying the image

    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?

    http://www.jero.net/template.html

  • #2
    Regular Coder
    Join Date
    Oct 2004
    Posts
    256
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why not?

    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.

    Update:

    *sigh...*
    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.
    Last edited by ronaldb66; 01-28-2005 at 09:16 AM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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?

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Beat me

    Heh... you beat me, Richard; I need to start typing faster.
    Stupid IE... better use Eric's solution, then...
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    Regular Coder
    Join Date
    Oct 2004
    Posts
    256
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry; I should have been more explicit instead of just assuming the first post was about the IE issue.

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by ronaldb66
    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?

    http://richardmedek.com/temp/example4.htm

    Should work...

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Eric's approach

    Code:
    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?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #9
    Regular Coder
    Join Date
    Aug 2004
    Location
    The Netherlands
    Posts
    211
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks everyone, for the help!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •