I’ve been able to narrow down my problem with IE7b2 and background sprites. However, I still have not been able to create a stripped down test page that consistently mis-behaves. So my observations, while not scientific, could save you some hours of debugging.
Internet Explorer 7beta2 is not treating transparent png background images correctly. It sees “background-position: 0 0” as “background-position: 0 100%”. Come to think of it, I have only tried a vertical sprite, this may be the same for a horizontal sprite.
What’s the solution?
You could create a series of rules in your IE7 style sheet to measure your new sprites from the bottom up, instead of top down. But this doesn’t solve some of the other odd issues with IE7 and transparent png images. I’ve seen the images load upside down and I’ve seen the images move when you scroll the page and the image hits the bottom of the browser. I thought I was going crazy or that I had some sort of mutated version. But this pseudo-animation works on other computers.
Our IE6 style sheet replaces our pretty alpha transparent png graphics with a simpler index transparent gif version. We replaced our re-measured rules in the IE7 with this set and it has solved our problems. It would be great to take advantage of IE7’s ability to use alpha transparent png images, but this bug is just driving me nuts. I’ve also been in contact with the IE7 team. They are dedicated to building the best browser possible within their constraints and hopefully this will be figured out before the final launch of IE7.
One other note of advice. Creating alpha transparent png images via the save as command in Photoshop on a Mac gave us the worst results. Those images did some very funky things on the page. Fireworks created better images.
c’est fini!
I don’t know if it is official or not, but I can say that the Microsoft engineers are interested in what developers have to say and have worked on this bug. I believe it has been fixed and will be all good to go with the final release of IE7. I can’t confirm or deny this, but I am pleased with their response to my initial post and followup.This bug has officially been officially fixed as of Release Candidate 1 and you can use your transparent png sprites without a worry in the world!
Leave a Reply