Long story short, IE 6 is a nightmare. Slightly longer story. If you want to use a sprite technique to reduce the number of roundtrips the browser makes to generate your page, it’s fairly straight forward… unless you use IE6.
If you’re making large sprites, with varied images that might be transparent, you might get away with using an 8 bit gif or png, but depending on how many colors the individual images contain you could easily fill up your color table. So, you’d be best off using all 32 bits of the RGBA PNG.
That works fine on IE7, FF2 and FF3. But we all know that way too many people still use IE6. There are some hacks to get transparent pngs to show up, but they don’t work for images in the background which is, of course, what you need for sprites.
In the midst of my preperations for hari-kari, I found this post on Julien Lecomte’s blog. It was a great step in the right direction, so I started hacking and got some stuff working. Here are some things that weren’t in Julien’s post worth sharing…
A simple example. Here is the markup that Julien showed, with an additional wrapper. Note one other difference, the
clip:rect(...) statement doesn’t use commas between the dimensions. (More on this later)
Before you try this, you should read how to arrange the dimensions in the
clip:rect(...) statement. It’s not terribly intuitive.
Here is the corresponding CSS. We use the filter hack to get the transparency to show, and we style the wrapper.
A couple of notes. We position the wrapper
relative so that it flows naturally in the layout, but also acts as the reference coordinate system for the span inside (which has been positioned absolutely). If we didn’t do this, the inner span would be positioned with reference to the first positioned parent element. If there were none, the browser frame would become the reference.
We’ve also set the overflow to
hidden. Since this hack just clips out the part of the sprite image that we want to see, IE6 still considers it as occupying part of the page. If you don’t hide the overflow, and your sprite strip is longer than the page, you’ll see scroll bars.
So what about those commas in the
clip:rect(...) statement? Well thank the flying spaghetti monster for Google. I played with this code isolation, got it working, then brought it over to a page I that I was going to use it in and FAIL. After some hunting and reading on google I found out that when you set your browser’s compliance mode, e.g.
IE6 has a cow and doesn’t like the way your
clip:rect(...) statement is formed with commas. The only solution is to get rid of the DOCTYPE statement, or get rid of the commas in the
clip:rect(...) statement. I’ve also noticed some funky treatment of how this final sprite image get’s floated by IE6 when the compliance mode is set. More on that some other time when I can take a proper look at it. For now I’m just really glad to have this (mostly) sorted out.