Use PNG image across browser (include IE6)

PNG image is not supported by IE6, to work around this, we can use AlphaImageLoader Filter in CSS.

The idea is using two divs, first one for IE only (IE6, IE7), the second one for Major browsers that support PNG, such as IE7, Firefox, and Safari. IE7 will pick up both, so we have to target it to force it use one only.

For example: If we want to make a button with transparent background using png image, first we need to make a div for browser that don’t support png, and another div for those does support png.

HTML Code:

<div id="ie6_button"><a href="#"></a></div> /*No text here, other browser will use the one below*/
<div id="general_button"><a href="#">Click here</a></div>

CSS Code:

IE6, IE7 will read this, other browser won’t understand the filter part, but will pick up the image dimension.

#ie6_button a{ display:block;height:50px; width:100px; float:right;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/images/button.png', sizingMethod='scale');}

#ie6_button a:hover{ cursor:pointer;display:block;filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader (src='/images/button_over.png', sizingMethod='scale');}