Eliminating CSS Image Flicker with IE6
One challange that web designers and developers often wrestle with is an annoying "image flicker" issue that sometimes shows up when using CSS image references. For example, when using a CSS rule like so:
.someClassName
{
background:#AABBCC url(someBackGroundImage.gif) repeat-x;
}
This can cause some browsers (including IE 6) to have an annoying flicker when rendering the image (especially when used with hover styles or for background images). In particular, this often shows up when building hierarchical and show/hide menus, and can degrade the UI experience for the site. There are two ways to fix the issue for clients:
1) Adjust your web-server's cache content settings for the static images being referenced from the CSS file. This unfortunately requires admin access on the machine with IIS 6 (although not with IIS7, which supports a delegated administration model that allows you to configure these rules in a web.config file within the app).
2) Use ASP.NET to define a handler that dynamically renders images with the appropriate cache content settings set. This does not require any special configuration on your web-server, and can be done by simply copying a .ashx handler file into your app.
Russ Helfand (who did the work on the ASP.NET CSS Adapter Toolkit) has a great blog post that details how to-do option #2. You can read all about his solution here.
This is a great tip/trick you can use for the Menu and TreeView CSS Adapters, as well as for any static element CSS rules you are using within your page.
Hope this helps,
Scott