SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Sheffield UK
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can anyone check this CSS rollover for flicker for me?

    Hi,

    I've 'designed' a simple CSS menu based on a lot of other people's hard work and it works fine for me in IE 5, 6 and 7 and latest Firefox.

    BUT - I know there are meant to be problems in IE 6 to do with reloading background images, leading to flicker. Can anyone tell me if flicker is likely to be a problem with this design as I can't get it to happen?

    I've tried a slowdown utility - made no difference. I know there's a server side fix for this, which my host MAY have implemented, so I might not be getting the worst case scenario. I say that because this is going to be part of a theme that people will hopefully instal on their own hosts.

    About 50% of my traffic to my other site uses IE 6 still.

    I'll leave the link below, if that's alright. I would post the markup, but perhaps that's not approved? Anyhow, it's possible to View Source - it's only a test page. Ignore the 'Preload Image' comment, that's just a reminder for me.

    The link is here.

    http://www.incenseheaven.com/templist.php

    Hope someone can advise!

    Richard

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As a rule of thumb you should never load an image on hover unless the image has already been seen and has been cached. usually you would have the rollover state and the current state as the same image and then it always gets cached and pre-loaded.

    The method I use is to put the rollover state in the background of the parent (e.g. the list item) and the place the foreground image in the anchor which sits on top of the rollover state and hides it. This means that both images always get loaded and cached. On hover you simply make the anchors background transparent and the image in the list shows through straight away because it was already there.

    The other method of pre loading rollovers is to use on image that has both states on it and then you just manipulate the background position on hover. You should never try and load an image on hover because it won't be fetched until it is called for and you get the delay.

    You have also gone overboard on classes and id's and you only in fact need 2 and not the 16 or so that you had!!

    The code can be shortened considerably and tidied up as follows.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    ul.rollover{
        margin: 0;
        padding: 0;
        list-style-type:none;
        text-align: center;
        height:60px;
    }
    ul.rollover li {
        background: url(http://www.incenseheaven.com/image12.gif) no-repeat left top;
        float: left;
        text-align: center;
        margin-left:30px;
        display:inline;/* ie double margin fix*/
    }
    ul.rollover li.current a  {
        background: url(http://www.incenseheaven.com/image3.gif) no-repeat left top!important;
        line-height:56px!important;
        color:#000!important;
    }
    ul.rollover li a{
        background: url(http://www.incenseheaven.com/image1.gif) no-repeat left top;
        width: 33px;
        height: 58px;
        color:black;
        text-decoration: none;
        display:block;
        text-align: center;
        font-style:normal;
        font-size:0.8em;
        line-height:56px;
        font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
    }
    
    ul.rollover li a:hover {
        color: #930; 
        background:transparent;
        line-height:44px;
    }
    
    </style>
    </head>
    <body>
        <ul class="rollover">
            <li class="current"><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
            <li><a href="#">four</a></li>
            <li><a href="#">five</a></li>
        </ul>
    </body>
    </html>
    That code is about half the size of yours and easier to understand

    Regarding image flicker in IE then there are a number of issues irrespective of what I have already said above and depends on whether the user has adjusted the browser settings and set the options to "every visit" instead of automatic. (Tools, Inernet Options, settings, "Automatically")

    If the user has selected every visit then the image will be fetched anew each time and won't be cached. This will result in a flicker and there is little that you can do about it. The default setting is "automatic" and is the one that everyone should use unless they are testing and developing sites etc.

    There is also another issue with IE in that it also flicks the hourglass on and off every time a link is hovered even when no image loaded and will do this even if only the background position is changed.

    It doesn't delay the image and is only noticable on slow machines and there is nothing you can do about it as it will happen regardless (unless you use foreground images for the rollover and then the hourglass doesn't get applied but this dirties the html for a cosmetic effect).

    I think the issue you were talking about with server side fix is related to the "every visit" scenario and you can adjust the server to instruct the browser to cache the image. However I think that's taking things a bit too far but you can read up on it here:

    http://www.fivesevensix.com/studies/ie6flicker/

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Sheffield UK
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Great answer!

    Thankyou Paul for a great answer.

    Your code looks MUCH neater than mine. That said I'm writing code for 'idiots' who have never come across it before and who want everything explained. Your code is so great that I'll use it and write a detailed explanation for them.

    Great explanation all around - I've come across a lot of it before but never explained as succintly. In particular the bit about never loading an image on hover - I'd come across the method, but couldn't figure out why it was meant to work. So now I know.

    Thankyou everso much, you must have spent a lot of time on that!

    Cheers!

    Richard
    Last edited by Alchemweb; Sep 6, 2007 at 00:42.

  4. #4
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No flicker here in IE6, but the links (one/two/three/four/five) extend out past the 'blah' base. (Right half of 'five' is out over the edge of 'blah'.)

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Sheffield UK
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Karpie. I'll look into that.

    I've put Paul's code up here for comparison:

    http://www.incenseheaven.com/templist2.php


Bookmarks

Posting Permissions

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