There are several issues I have faced with when I was using PNG images on my pages. “PNG is a multichannel support image format that can provide transparency for designers.” Internet Explorer does not support transparency for PNG files in versions bellow 7.0 and this is so ridicolous. Specialy when you are using it as a background image.
First of all let see how can we enable the PNG transparency features in IE,
The Solution :
To see the issue clearly, see this sample. the solution is explained in this link clearly. all you need to do is to have a reference to the javascript code
this code searchs for all png references in your html code and apply the fix on it.
Next issue causes when you use transparented PNG images on the background of any HTML element. In this case all the focusable elements on the page will go under an invisible layer and you can not use mouse to click on them.
The Solution :
simply move your clickable elements on your page on a higher z-order and detach them from the current parent element by using CSS.
here is a sample:
a,input,select,button{
z-order:2;
position:relative;
}
using relative positioning may cause some visual problems in IE 5.x for these elements to prevent this use position:absolute for your parent page wrapper in your HTML code.
#pagewrapper{
position:absolute;
margin-left:auto;
margin-right:auto;
}
Please leave your comments and tell us your experience with png compatibility problems in IE or other browsers.