Case 1: Broken

Problem Analysis

• Specific to IE6Win not found in 5.0/5.5
• Only affects elements whose rollover may produce a dynamic effect (e.g. a elements)
• master trigger: if IE6's cache setting is set to "Every visit to the page". Any other setting will prevent the flickering.
• trigger: background CSS properties:
  • if color is any value other than transparent;
  • if repeat is any value other than repeat;
  • if position is set (any value)
• trigger: if the area of an element with background-image is less than 2500 pixels
• trigger: if the image specified in background-image is a transparent GIF

Solution 1: Forced Caching

It is possible to fix this problem by forcing IE6 to cache images for a set amount of time. This requires a configuration of the server itself. I would only recommend this method if the page were entirely static. The fix will force-cache all images on a website, rendering visual updates null in IE6 clients until file expiration.

Solution 2: Nested Images

If the situation is such that the afflicted element is contained by another element (in this case the <h2>) it is possible to eliminate the visual flicker by giving both the afflicted element and it's parent the background image, or to simply give parent element the image and leave the child transparent.

The advantage to this solution is that it may be targeted specifically to IE6 safely with conditional comments or CSS filtering.

Case 2: Fixed