After hours of relearning XHTML, CSS, PHP and the like, I was mortified to hear that my website ‘broke’ when using Internet explorer. This was due to the use of PNG (Portable Network Graphics Format) for alpha blended background images. Essentially I was using CSS to define a background colour and then superimposed a transparent image ontop to provide a background ‘title’ and also allow flexibility in later design if I wanted to change the colour scheme.
Internet Explorer 6 and previous generation simply do not support transparent PNGs and even the support it does have for regular PNGs appears to be limited. On the plus side, the upcoming IE7 (currently in Beta 3) appears to fully support PNGs, but I’m going to stay sceptical until the final release.
Update 1st September 2006: Turns out there are various ways to get around this via custom IE CSS, javascript etc, here are a few options to get you started:
- http://homepage.ntlworld.com/bobosola/Â Javascript Solution
- http://koivi.com/ie-png-transparency/Â DirectX solution (perhaps the neatest)
- http://blogs.msdn.com/dmassy/archive/2004/08/05/209428.aspx The official solution! There’s a fair amount of abuse too.
Another bug – the lack of max-height, max-width, min-height, min-width etc etc
Quite a neat solution: http://www.svendtofte.com/code/max_width_in_ie/Â