Internet Explorer 6 for Windows is a sore spot for many users of CSS. Besides its countless rendering problems, it has the annoying habit of causing background-image styled elements to flicker when moused over. This article will cover a few things I’ve found that will eliminate that flicker. (quote from this art)
2 articles about this problem:
Minimizing Flickering CSS Background Images in IE6
and
Fast Rollovers Without Preload
Summary:
1) Don’t use gifs
2) Don’t use any background color but transparent
3) Don’t use any position at all
4) Don’t use background-repeat but repeat
4) Don’t use blocks less than 2500px (50×50)
else
make your a:hover background-image: none (or the same); color: transparent and put your bg to outer element also.
Damn. It seems it’s really better and simpler just to forget about background-image for <a> tag at all.
Or kill your-self.
If your tests don’t flick just change your Temporary Internet Files settings to “Every Visit to the page”.
AJIeKC, You ARE REALLY }I{}I{OLLIb!
BTW, do You have any Ma.gnolia account?
🙂
Not yet…
But hmmmm…
Hold.
…
Yes I have 🙂
I am there. As [mauz].
Oh, good news! Another one brick in the wall!
This post looks like it’s over a year old, so you might have found this on your own, but there is a solution that bypasses the problems you were having. (The 2500px, background-repeat, positioning, etc)
To do it, first enclose the link inside a div,
for the CSS, it will be something like this
#linkContainer {
background-image: url(‘hoverImage.png’);
background-position: -10px;
}
#mouseOver {
background-image: url(‘hoverImage.png’);
display: block;
width: 10px;
height: 10px;
}
#mouseOver:link , #mouseOver:visited {}
#mouseOver:hover , #mouseOver:focus {
background-image: none;
}
#mouseOver:active {
background-image: url(‘hoverImage.png’);
background-position: -20px;
}
Customizing to fit your needs of course, what this is doing is instead of doing the intensive (for IE) process of moving over the image on the mouseover, it’s just making it disappear, which it does much faster. When it does, the image below, which is the hover state, appears. It isn’t an elegant solution, but it works, and does so without a significant amount of extra code, or download time for the user. Though, if you had a bunch of these on a page, it would add up.
Rats, the html portion was dropped, here’s the HTML again
<div id=’linkContainer’>
<a id=’mouseOver’ href=’#’></a>
<div id=’linkContainer’>
Usually I take the same solution (parent container background).
I don’t code much recent time though 😉
http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker
Спасибо за ссылку.
У меня, правда, его пример не отработал (выдал JS ошибку) на IE6, но у меня stand-alone версия.
Но покопаю еще на досуге.