IE vs. Image Replacement

April 08, 2004 2PM PST

Sure, I admit it: there’s a glaring IE6 glitch on this site. I’ve known about it for a while, but I’m not going to fix it. Well, there are two glitches actually, and the second is a little more tricky. But let’s talk about the first.

The big red banner is displayed by image replacement on an h1. Since I built the site, hovering caused the infamous ‘flicker’ in IE (which is the second problem, but I digress again.) Then I interviewed Ryan Carver for WaSP, and took a look at his IE investigation, after which I applied his method to the banner, thereby eliminating the flicker for good.

Except doing so introduced a brand new bug no one had ever seen before. What it looks like: a piece of the content from the body is being duplicated, and briefly layered over top of the banner itself. It’s easier to just see it:

IE Bug!

I have no idea what causes it or how I’d go about isolating it, and I’m not even going to bother. Instead, I’m going to point and laugh, and leave it as-is. Just because it’s IE. And just because I can.

(because some make disclaimers mandatory: this ‘ignore it’ approach is to be taken for this site alone. mezzoblue caters to web designers, who should know better than to run IE in the first place. No, you shouldn’t penalize users for their choice of browser. No, this isn’t an attitude to take when doing commercial work. No, I don’t know whether I’ll have the fish or the chicken.)

Okay, so the second bug is something more problematic, because it does affect most everyone else. In certain instances, hovering over image-replaced links causes the link to blink out and back in as the image re-loads. Keeping an eye on the IE/globe ‘throbber’ up in the top right corner shows there’s some network activity happening as it does this, albeit very briefly; watching your outgoing packets confirms it. IE isn’t caching, but reloading (or at least re-checking) the image every single time, causing the flicker.

There’s an easy fix! I wrote about it six months ago! It doesn’t actually work!

Well, it does for some. But here’s something I’m noticing — even with that generous caching setting turned on, in some instances IE still causes flicker. Like, on this site for one. Like, allegedly, on the Sprites demos at ALA for another. Which really causes me to scratch my head, because I purposefully layered two sets of images over top of each other to eliminate the problem.

But no matter, due to the inconsistency and terrible difficulty in tracking it down I’ve started to suspect it has to do with a server setting anyhow. Well lo and behold, in the very post referenced above, a link posted by Blake Scarbrough to a discussion which I either never saw or don’t remember seeing points out some .htaccess configuration which may yet provide a fix. I haven’t touched the code, so I can’t vouch for it yet, but you can be sure I’ll give it a shot when I have the chance.

update: Since there seems to have been confusion about this, despite the disclaimer, you’ll note that the second problem (the one that actually is a real problem that should be fixed) I said just above I would look into and fix. And so I have. Provided you have caching turned on in Internet Explorer, the flashing problem should be alleviated. The .htaccess lines in the css-discuss thread linked above did the trick. IE still flashes if caching is set to ‘check every time’, but as explained in the entry from six months ago I also linked to, this is a developer setting that has to be manually turned on, so most users will not experience it. Flashing problem: solved. Original IE glitch I decided not to solve: probably solved too. Onwards.