Mambo Open Source/PNG alpha

TOC
Chapters
Home
Configuration
Design
Content
Development
Miscellaneous

Some browsers, among those Internet Explorer, doesn't show transparency on transparent png-images. Instead, a grey colour is shown. This fixes the problem, but only for Internet Explorer (Win). NB! This problem doesn't affect Firefox, Opera and Netscape.

Why png?

Many people say that one can use gif images - both Internet Explorer, Firefox, Opera and all major browsers support transparency in gif images. The thing is that transparency is pretty bad and lossy in quality compared to png images. Regular transparency with hard edges are no problem, but shadow and transparent gradients are no good with gif. Png can do this without problems, tough, only that Internet Explorer (Win) doesn't support it (IE for Mac does).

How to solve the problem

Adding code to the relevant page

There is a simple modification that needs to be done with the template(s) the site is using.

This can be done from mambo, as long as the appropriate files are writable. Log in to the backend. Choose "Site > Template Manager > Site templates". Choose the template that should be modified (naturally the standard template) and choose "edit" in the toolbar.

On the top of this document, add this line:

<?php
require_once("includes/ie_png.php");
?>

Then upload the "ie_png.php"-file in the "includes" folder of your mambo installation.

Fixing the images themselves

Internet Explorer (Win) can actually render some png-files - those with 256 colors. These images can contain any color in the HEX color scheme, but not more than 256 colors all together within the image. This is more than enough for most cases. Save/render the png images with this attribute, and Internet Explorer will actually render transparency.

There are some problems with transparent gradients, as fading shadows etc.