SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is there anyway to keep <li> background images from flicking in IE?

    I have some drop down menus that have mouseover images for the main bar then bullets that load as an image in each <li> tag for the sub links. Everything looks great except in IE whenever I mouseover each link, the images in the main nav bar and the bullet images next to the sub-links flicker. This only happens if IE is set to check for newer versions of stored pages each visit.

    Does anybody know of a way to keep the images from flicker? Is there a way to keep IE from reloading the images when mousing over each link?
    John Saunders

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How are the images loaded - are they <img> tags in the page, or CSS background-images with a :hover?

    If the former, use a Javascript preloader. If the latter, try the no-flicker rollover (http://wellstyled.com/singlelang.php...rollovers.html).

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    This only happens if IE is set to check for newer versions of stored pages each visit.
    You should be using the automatic setting because the images will be loaded from server for each request of the background image and not held in cache.

    Even the second link that Buddy gave will suffer badly from flicker as the image is requested anew each time. (That method is good but still suffers from the ie hourglass flicking on and off even when the settings are on automatic).

    The only method you could use is mine here which works even using the setting that you have specified because the inage is in the html.

    http://www.pmob.co.uk/temp/cssrollover4.htm

    (And it doesn't suffer from the annoying ie hourglass that all other methods do.)

    So the choice is yours either change your internet settings in ie back to the default of automatic ( as it should be) or use my method above.

    Paul

  4. #4
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I never knew that...

    Surely, the wellstyled version doesn't reload the image, as it's simply asking it to move position?

    I am also forced to have my browser settings set to "check for a new version every time" (It's a work policy thing), and <li> rollovers get me seriously p****d off. However, I never have any troubles with sites incorporating the Wellstyled solution.

    Strange.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    However, I never have any troubles with sites incorporating the Wellstyled solution.
    I just tested on mine before I posted and the images take about a second to load on each rollover when I change my settings to every visit. It seems that any manipulation of the background image is causing a re-load, which can be seen by the hourglass flicking on and off (even on the automatic setting). I'm not 100% sure whats really going on but thats the way it seems to me

    Paul

  6. #6
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for the info. The only thing is that if I can see the flickering if IE is set to check for newer versions of stored pages, then my visitors can too. I knew how to fix the problem on the client side, I just wanted to see if there was some way to fix it on the server side.
    John Saunders

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The only thing is that if I can see the flickering if IE is set to check for newer versions of stored pages, then my visitors can too
    I'll bet that 99% of your visitors won't know how to change that setting or even what its for

    The default (and recomended) option in ie is automatic and this is how the browser is pre set. Therefore a user would specifically have to change this option and theres nothing you can do about it because its their browser.

    You could use my rollover version which still works without flicker even with the every visit set but you do have to have the image in the html (which may be too big a drawback for some).

    Personally I wouldn't worry about your visitors having this option set. (The same thing will happen when their cache is full also.) Apparently, if all users had their options set to every visit then the web would grind to a halt with millions of new requests (how true that is I don't know but its worth thinking about lol).

    Paul


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
  •