When a CSS file has pathnames, such as to image URLs, they are supposed to be relative to the URL of the CSS file. That’s why we got utterly baffled at work when our background images looked fine in everything but IE, which didn’t display the images at all. (Here I mean IE7. We stopped giving full support for IE6, and haven’t yet started full support for IE8.)
Here’s what we learned: if the URL of the CSS file has a redirect, IE will use the original URL, the one in the <link> tag, rather than the true, final URL. This remains true even with a 301 on the redirect. This is, well, awful.
Given the project constraints, our best solution was to duplicate the background images from the server with the target URL to the server with the redirecting URL. Thankfully, in a few months time, when the project constraints change, we will no longer need the redirect and can get rid of one set of images.
Still, this bug is so frustrating and so contrary to expectation that when we sent around the solution for internal code review, our front-end system architect needed a lot of convincing since “that couldn’t be it”, and we had to carry him through the same stages of grief we’d just been through.
Word of warning: don’t put a redirect on a .css URL if you have relative pathnames.
Posted in Browsers, CSS |
Follow responses via RSS 2.0 feed
You can leave a response, or trackback from your own site.
“Thankfully, in a few months time, when the project constraints change, we will no longer need the redirect and can get rid of one set of images.”
Wait, y’all _get_rid_of_obsolete_images_ now?!? Like, as in, remove them from the deployment package? Who had to blow a goat to get that to happen?
Mazel tov!
Blink.
Blink.
I’m still waiting for the punchline…because this must be a joke, right?
Sadly, I know that it isn’t. Rumor has it that Outlook 2010 won’t support CSS OR inline styles. Because, you know.