IE flicker image problem for tab menu

Hi All,

The following css style makes a flicker when i hover over the tabs. It works fine with firefox, Any ideas?

      body {
                  background:#fff;
                  margin:0;
                  padding:0;
                  color:#000000;
      }

      #header {
                  float:left;
                  width:100%;
                  background:#BBD9EE;
                  padding:0;
                  font-size:0.8em;
                  line-height:normal;
      }
      #header ul {
                  margin:0;
                  padding:10px 0 0 10px;
                  list-style:none;
      }
            
      #header li {
                  display:inline;
                  margin:0;
                  padding:0;
      }

      #header a {
            float:left;
            background:#E7F1F8 url("../images/tabs.png") left top no-repeat;
            padding:0 0 0 9px;
            text-decoration:none;
            font-weight:normal;
            color:#000000;
      }
      #header a span {
            float:left;
            display:block;
            background:#E7F1F8 url("../images/tabs.png") right top no-repeat;
            padding:4px 15px 3px 6px;
            text-align:center;
      }
      /* Commented Backslash Hack hides rule from IE5-Mac \*/
      #header a span {float:none;}
      /* End IE5-Mac hack */

      #header #current a span {
            padding-bottom:4px;
            font-weight:bold;
      }
      #header a:hover, #header a:hover span {
            background-color:#FFFFE6;
            color:#000000;
      }
      #header #current a span, #header #current a {
            background-color:#ffffff;
      }

Following is the html used

<ul id="header">
<li id="current"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul>

Thanks for your help.

fargo
LVL 11
fargoAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

fargoAuthor Commented:
Hi,

One can have a look at the following
http://www.fiftyfoureleven.com/sandbox/doors-meets-mountaintops-3/

the hover is flickering (only in IE). How one can fix it?
Any idea fellas?

fargo
mreuringCommented:
Looks nice :) And indeed, when I set my caching to 'every visit to page' IE starts reloading the bloody image on every change. Supposedly this can be prevented by providing more interresting caching information about the images.
In theory your server could instruct browsers that the image has not changed since 1980 and won't be changed for years to come, thus preventing IE's reload behaviour. I'm not particularly sure it this works however. Also, taking into account the general populace, who will never touch their settings concerning caching, this behavious only occurs to a minority and mostly will entail developers, who should know better.
Anyway, this is the digested take on this topic, for more info and aditional workarounds I recommend this link:
http://www.fivesevensix.com/studies/ie6flicker/

Good luck,

 Martin

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
fargoAuthor Commented:
>> In theory your server could instruct browsers that the image has not changed since 1980 and won't be changed for years to come, thus preventing IE's reload behaviour. I'm not particularly sure it this works however.

I preferred it then. -:)

keeping aside my no good detailed expertise in CSS,  i preferred to go with server side logic handling. I use Servlet Filter for not changing the response headers for the images etc. It then prevents IE to reload the images and it works fine then.

fargo
mreuringCommented:
Hey Fargo,

Glad I could help and good to hear that sending the proper response headers works in practice!

Martin
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.