Fixing PNG CSS backgrounds on IE6

Today I was stuck (again) on a really annoying IE6 glitch. In the photo, screenshot #1 is the correct display in IE6 after the fix (and all other “sane” browsers before the fix), while screenshot #2 shows the glitch. Basically, IE6 decided to replicate the beginning of the same image on all items.

You might think the problem was in my HTML code, or maybe in my CSS code. The HTML is 100% valid and following all modern guidelines: only a’s, li’s, div’s and text nodes. So, the problem could be in the CSS file – which applied a single sprite sheet on all the li’s, div’s and a’s, through background-position. In case you’re wondering what css sprites are, have a quick look: http://www.google.com/search?q=css+sprites&hl=en

So, after adding zoom, z-index, removing position: relative;, removing overriding classes, changing all background declarations to background-image, background-repeat, background-position declarations, the problem persisted. In other words, none of the regular methods worked.

After a quick-search on the internet, I found some articles discussing PNG overlaps and transparency on IE6, but also mentioning background-position‘s (http://www.dillerdesign.com/experiment/DD_belatedPNG/, http://www.hotscripts.com/forums/css/45733-solved-css-newb-overlap-issue-ie6-2-links-issue.html). Just then I realized that the problem might be with the file format – stupid, in my opinion, but not in IE6’s opinion.

Changing the file from a regular 8-bit PNG to a GIF solved the entire overlapping problem. No CSS intervention (other than changing the reference to a .gif file), no HTML edits, just an image format change.

Conclusion

If you don’t need images with an alpha channel and want to use background-position‘s with those images, and want to make it work with IE6, stick to GIF files. If you don’t care about IE6, then this will definitely not be not a problem for you.