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');}

Posted at 8pm on 09/15/07 | no comments | Read More

About

HI, I’m Linus, a freelance web designer in Brisbane, Australia.

You’re now browsing my weblog, feel free to look around and leave your comment.

You are also welcome to view my recent works, feedback would be much appreciated.

For anything else, email me at contact@linuslin.com or send me a message using the feeback form, thank you.

Feedback form

Portfolio

The Activities Team

Threads and More

RhinoBag

Butlers

Bryntawel Sporting Horses

Oskar

See more works