Loading...
 
Skip to main content

PngBug

Transparent PNGs


In Internet Explorer before version 7, transparent pngs are displayed with a light blue-grey background (it replaces the transparency with a pale blue-grey background, but does correctly calculate the opacity). This isn't a Tikiwiki specific bug, rather a generic IE bug.

The PNG support in IE before version 7 is frankly awful. In addition to its inability to render transparent PNGs, IE also has a tendancy to reduce the colour pallete and/or dither the image depending on various factors. The problems are pretty widely known and a Google search will provide further details and suggested workarounds.

Tweak the image
PNG Behaviour
Server-side replace with GIF
JavaScript solution
JavaScript solution

Apache webserver solution

Create transparent GIF versions too, and use Apache webserver's MultiViews feature to serve the appropriate filetype to the appropriate browser. Because GIFs don't support transparent opacity (transparency is either on or off), the gif versions don't look so good.

Additionally, as the GIF versions are often smaller and the Opera browser indicates to the server that it is just as happy displaying GIFs as PNGs, the server will supply GIFs to Opera by default. To get around this, one can use the *.var files feature of Apache to indicate that the server should supply PNGs in preference to GIFs unless the client offers a preference.


Note that there doesn't appear to be a complete solution for background images in DIVs. Any attempt to use a filter results in either the replaced image scaling to fill the entire DIV, or the text being clipped to the bounding box of the image.


Page last modified on Friday 24 June 2005 04:48:50 GMT-0000