Help fix IE6 alpha channel bug
June 4, 2009 6:03 PM Subscribe
Help me quash this ridiculous IE6 bug that is putting gray boxes around images on my website!
I recently hired a designer to redo my steampunk website and in the process he introduced a bug that appears to be specific to IE6 (I don't have 7 so maybe its in IE7 as well) where gray boxes surround some of the images. It is driving me crazy and I have no idea how to fix it and my designer has from what I can tell bailed on me because he won't respond to emails (he's a college student, go figure).
I have a hunch it has to do with how IE6 handles alpha channels but I don't know enough about coding to solve. Please for the love of god make those boxes go away!
I recently hired a designer to redo my steampunk website and in the process he introduced a bug that appears to be specific to IE6 (I don't have 7 so maybe its in IE7 as well) where gray boxes surround some of the images. It is driving me crazy and I have no idea how to fix it and my designer has from what I can tell bailed on me because he won't respond to emails (he's a college student, go figure).
I have a hunch it has to do with how IE6 handles alpha channels but I don't know enough about coding to solve. Please for the love of god make those boxes go away!
You need the iepngfix. The installation instructions are very simple, just download a couple of files and add a line to your css.
posted by hobgadling at 6:22 PM on June 4, 2009
posted by hobgadling at 6:22 PM on June 4, 2009
If it's png images that the transparencies aren't working for, then it's a long-known problem. This search will bring you some answers. I've had success using this technique, but it's fiddly.
The easier fix at the end of the day is just to convert the pngs with transparency to gifs with transparency, because IE6 understands them. Issues with filesize and clarity are the downside, though.
IE6 is a goddamn nightmare, and I'm very tempted to just say 'screw it' when designing new sites these days.
By the way, the site's kind of broken in Firefox 3. Here's a screencap.
posted by stavrosthewonderchicken at 6:30 PM on June 4, 2009
The easier fix at the end of the day is just to convert the pngs with transparency to gifs with transparency, because IE6 understands them. Issues with filesize and clarity are the downside, though.
IE6 is a goddamn nightmare, and I'm very tempted to just say 'screw it' when designing new sites these days.
By the way, the site's kind of broken in Firefox 3. Here's a screencap.
posted by stavrosthewonderchicken at 6:30 PM on June 4, 2009
Whoops. Beaten to the punch.
posted by stavrosthewonderchicken at 6:31 PM on June 4, 2009
posted by stavrosthewonderchicken at 6:31 PM on June 4, 2009
Looked through the source of your site briefly, looks like the coder already tried to implement some form of workaround for IE7 and PNGs (which I was not aware was problematic), so keep an eye out for potential conflicts.
posted by Inspector.Gadget at 6:31 PM on June 4, 2009
posted by Inspector.Gadget at 6:31 PM on June 4, 2009
Response by poster: Well, thank you all for the great feedback. The FF3 issue is a new one...argh. He ditched me with a half-completed site!!!! Feel free to to MeFi mail me if you would be interested in doing a little freelance work to fix this!
posted by Elminster24 at 11:10 PM on June 4, 2009
posted by Elminster24 at 11:10 PM on June 4, 2009
FWIW, I'm on FF 3.0.5, and it looks fine to me.
posted by General Malaise at 8:47 AM on June 5, 2009
posted by General Malaise at 8:47 AM on June 5, 2009
This thread is closed to new comments.
Basically just copy the IEPNGFix files to your web directory and insert the CSS code as suggested in the demo.
MeFi mail or email me if you need more detailed help, but the IEPNGFix website is nicely detailed and has great step-by-step directions.
posted by cvp at 6:21 PM on June 4, 2009