Sent by David Feldman on 4 August 2005 15:03
I've read a bunch of different techniques for dealing with background-
image flicker in IE (which seems to occur on <a> elements as well as
on other elements when their CSS properties are being modified by
JavaScript. Some have worked, some haven't, and some aren't
appropriate to all situations (for example, I don't think the double-
buffer method would work in a situation where I'm setting a:hover,
but I could be wrong.)
Anyway, I've come up with an additional technique that uses the IE
AlphaImageLoader filter (the one everyone uses to get IE to work with
transparent PNGs). In its simplest form, it looks like this:
a {
background-image: url(/img/some-image.gif);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/img/some-image.gif',
sizingMethod='crop');
}
a:hover {
background-image: url(/img/some-image-over.gif);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/img/some-image-over.gif',
sizingMethod='crop');
}
As far as I can tell it works like a charm. If you're using GIFs, you
don't even need a real browser branch: non-IE browsers will ignore
the filter, and everything will look fine in IE because it's layering
two copies of the same background image (whose pixels are either
completely transparent or completely opaque) on top of one another.
If you were using transparent PNGs instead, you'd need a branch.
Any thoughts on the pros and cons of this method? It seems simpler to
me than some, though it won't work for repeating background images.
--Dave
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
