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 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    a hover weirdness at IE

    I have this list menu, made with the help of this tutorial at "listamatic, the thing is that when you hover over the links at IE there is a delay in which the image in this case in grey turns blank (it doesn't actually appears) for like 1 second and then it's "visible" again, like it's supposed to be.

    Any one has an idea on how to avoid this? 'cause it looks really "unprofessional" like that.

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

    You know the drill...

    If people can't see how you implemented it or experience the effect on your exact page in their browser, it remains a wild guess what the cause is.

    So, please show us the code (both CSS and HTML), but preferably, put it online somewhere and post a link.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did posted a link, the tutorial site has the exact same problem, but anyway, here's the code:

    Code:
     <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
    </ul>
    </div>
    
    (on the css file)
    #navcontainer ul
    {
    list-style-type: none;
    text-align: left;
    }
    
    #navcontainer ul li a
    {
    background: transparent url(images/list-off.gif) left center no-repeat;
    padding-left: 15px;
    text-align: left;
    font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
    text-decoration: none;
    color: #999;
    }
    
    #navcontainer ul li a:hover
    {
    background: transparent url(images/list-on.gif) left center no-repeat;
    color: black;
    }
    
    #navcontainer ul li a#current
    {
    background: transparent url(images/list-active.gif) left center no-repeat;
    color: #666;
    }
    and the example its right here, no matter if that's the only thing on the page (with the doctype and the basic html layout of course), it always has the same error on IE

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

    IE is the culprit...

    ... or so it seems; I've done some Googling on "hover delay" and this resulted among others in a link to a thread discussing the problem: the lagging seems specific to IE that doesn't load the hover state image until the link in question is actually hovered over.
    It should only occur really on the first hover; after the image is loaded in cache, the lag should be gone, or noticably less.

    A workaround would be to load the hover state image as background underneath the link (in case of a list: as background image to list item), load the normal state background on the link - hiding the hover state background, and remove it on hover, revealing the hover state image on the list item again.
    In this way, both images are loaded in cache straight away and even in case of lag occuring, there's always an image to look at.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    New Coder
    Join Date
    Sep 2004
    Location
    Guadalajara, Mexico
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, thanks I'll work on that, or I could also use a script to load certain images when the page opens, but your solutions seems easier and faster


  •  

    Posting Permissions

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