CSS PNG Hack Revisited
Sep
08
In my previous article "CSS PNG Hack for Internet Explorer (IE)" I showed a commonly used CSS method deployed to enable the usage of PNG’s in Internet Explorer 6. However, I did not mention one vital piece of information that was brought up in the comments section of the article.
When using the CSS IE filter you CAN place it in an external style sheet, however, you have to reference the PNG as if you are referencing it directly from the page in question NOT the style sheet.
For example your home page will sit at the root of your site, your logo PNG sits in a folder called images which is also at the root of your site and your style sheet sits in a folder called CSS also at the root of your site.
To correctly reference this image you must use the following code.
NOT
It’s not just you: pretty much every other site which peddles this fix fails to mention it too. That’s fine for the demonstration when everything is in one convenient folder, but when you’re developing an entire site and trying to make practical use… the correction no longer works and you get a page of grey boxes.
Hopefully this caveat starts to get more coverage, it’s an important part of a useful tool.
(and it might be an idea to put some update note at the top of the previous entry so that people are guided to the answers here)
I agree with you totally. I must admit I’ve used this technique myself lately and it can be very tricky, however, as you said it is a very powerfull tool.
Thanks so much for this! I’d found this fix on many sites, but couldn’t figure out why it wasn’t working for me until your article. This was VERY much appreciated…
Its good, however it has some W3C Validation Issue.
thank you!