Results 1 to 5 of 5

Thread: IE Flicker on CSS Background

  1. #1
    Tom
    Tom is offline
    Trusted Guru Tom's Avatar
    Join Date
    Jan 2009
    Posts
    1,022
    Blog Entries
    16

    Default IE Flicker on CSS Background 20 May 2009 @ 20.37

    anyone know a possible fix for css background flicker on links with hover.

    HTML
    Code:
    <a class="package low" alt="Low Package"href="#">Low</a>
    CSS
    Code:
    a.package {text-indent: -9999px; color: #FFF; }
    a:hover.package {color: #039;}
    
    a.low {background: url(../images/packages_01.jpg) no-repeat #FFF top; height: 350px; width: 218px; display: block; float: left;}
    a:hover.low {background: url(../images/packages_over_01.jpg);}
    Inexpensive Themes <<-- Affiliate link but it won't cost you.
      Reply With Quote

  2. #2
    Tom
    Tom is offline
    Trusted Guru Tom's Avatar
    Join Date
    Jan 2009
    Posts
    1,022
    Blog Entries
    16

    Default 20 May 2009 @ 20.47

    after some reading it seemed the issue was due to caching..

    So after lots of tinkering with supposedly "fixes" using java script, but none worked.

    as it was cached, and not loaded on the page until the mouseover effect, I thought the best fix be to include the images and set the visibilty to hidden directly within the html.

    Code:
    <img src="http://webprocafe.com/images/packages_01.jpg" alt="" width="218" height="350" style="visibility:hidden;" />
    <img src="http://webprocafe.com/images/packages_over_01.jpg" alt="" width="218" height="350" style="visibility:hidden;" />
    Seems to have done the trick.. but not the best way..
    Inexpensive Themes <<-- Affiliate link but it won't cost you.
      Reply With Quote

  3. #3
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default 20 May 2009 @ 21.22

    nah, best way is to use css sliding doors technique.

    Have both on & off states within the same image and use css to just show the off state, then on the hover psudeo class move it down/across 350px/218px

    you can also use the spry method, in which you have all your images in the same super image and just use css to pick up the correct ones.

    sorry if that doesn't make sense, knackered from football.
      Reply With Quote

  4. #4
    Tom
    Tom is offline
    Trusted Guru Tom's Avatar
    Join Date
    Jan 2009
    Posts
    1,022
    Blog Entries
    16

    Default 20 May 2009 @ 23.00

    the css sprites method....

    I may give it a go, stupid IE.. ruins everything.

    Its amazing to think all I wanted was a mouse over effect on an image, and IE cant even make that work correctly.
    Inexpensive Themes <<-- Affiliate link but it won't cost you.
      Reply With Quote

  5. #5
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default 21 May 2009 @ 11.32

    sorry, i get confused in my old age, but you know what I mean ;o)
      Reply With Quote

Similar Threads

  1. changing out background
    By trixiemay in forum HTML & CSS
    Replies: 3
    Last Post: 17 Oct 2010, @ 21.57
  2. Flicker in jQuery sliding div
    By trixiemay in forum Javascript Libraries
    Replies: 1
    Last Post: 30 Sep 2010, @ 22.27
  3. background position
    By sudhakararaog in forum HTML & CSS
    Replies: 2
    Last Post: 19 May 2010, @ 13.37
  4. CSS Extending background
    By 1christopher in forum HTML & CSS
    Replies: 1
    Last Post: 24 May 2009, @ 21.05
  5. Changing a Background in VB
    By Wrams in forum Content Management Systems, Blogs & Forums
    Replies: 19
    Last Post: 16 Apr 2009, @ 22.32

Tags for this Thread

Posting Permissions

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