Griffin Interactive

Internet Explorer and 24-bit Alpha transparent PNGs

Everybody knows that Internet Explorer cannot render 24-bit alpha transparent PNG's. Which is a shame because drop shadows and rounded corners are so en vogue at the moment (2006).

There is a way to use a Microsoft filter within your stylesheet so that PNG's are rendered correctly, the trouble is this is quite resource intensive (uses up your computers memory) and if you use Anchor tags or even form elements like text input boxes then they won't work.

There are however a couple of sneaky hacks that can help.

The following shows how Internet Explorer has problems with form elements and filters when used together.

Example 1 - The problem

Form elements are unusable

Example 2 - The work around

Use a 24-bit alphtransparent image as it is but force the input elements to be relatively positioned with a z-index of 0.

	
    #filter-example-2 label, #filter-example-2 button {
	  position:relative; 
	  z-index:0;
	 }
	

	

Example 3 - Another work around

Use a 24-bit alphtransparent image 1px x 1px.

We can't repeat the image (i.e. repeat-x / y) but we can scale it using the filter

XMLHttpRequest Object methods