asked on

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="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>

Thanks for your help.

fargo

fargo

ASKER

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

ASKER CERTIFIED SOLUTION

mreuring

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

fargo

ASKER

>> 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

mreuring

Hey Fargo,

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

Martin