ie6 png transparency
ie6 png transparency problem example image
I recently encountered an issue regarding png transparency on older browsers whilst developing a website targeted at schools.
The web site used png transparency to display rounded corders and tabs over a sky background. It worked well in all modern browsers but in ie6 and lower the png transparency was replaced by an ugly grey box.
Due to the project specifications identifying ie6 in the browser compatibility list it was necessary to find a solution to the problem.
I spent some time researching possible solutions and tried a few out, some worked, some were difficult to implement and others just didn’t seem to work at all. After some time I settled upon a solution and have documented it with the following example:
The solution involves 2 methods for dealing with png transparency, one to handle img tags in the html and one to handle css background images. I have also documented how to overcome the issue with non clickable links after implementing the css only png transparency solution.