How to Fix the Flickering IE6 Bug on Background Images

Posted on October 22, 2007

First you’ll need something like this. If you don’t already have an IE6 hacks file, I don’t know how you’re livin’! (Or, chances are if you’re not targeting IE6, your site might not look so hot in this favorite browser of ours from the fine folks in Redmond.)

<!--[if IE 6]>
  <%= stylesheet_link_tag 'ie6_hacks'%>
<![endif]-->

Next in your “ie6_hacks.css” file, add the following:

* html {   /* fix flickering ie6 bug on background images */
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

A co-worker discovered this fix for us recently. Thanks, Paul!

Imports Considered Harmful

Posted on September 26, 2007
So in your layout you have something like this:
<%= stylesheet_link_tag 'main' %>

Then in your main.css you have something like:

@import "interface.css"; /* element level style */
@import "style_class.css"; /* class level style */

The problem is—how do browsers know to request a fresh copy of the imported CSS files whenever they change. When you use Rails’ helpers, an etag gets appended on the end of the requests. (that’s the ?13232352 you see on the end of rails-generated asset URLs)

Instead of using CSS @import directives, just use the rails helpers or a system like Asset Packager to group all CSS into a single file and force a download on any css change.