WebMonkey Beta 2.0: The Web Developer's Resource

Help|
Rss feeds
- Rss feeds
- Subscribe to:
- Tutorials
- Reference
- Code library
- All articles
- Monkey Bites Blog

Member Sign In

Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.

It's fast and free.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Join Webmonkey

E-mail address:

Username:

Password:

Confirm password:

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.

Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.

Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

Webmonkey is a property of Wired Digital.

processing...

Welcome to Webmonkey

A private profile page has been created for you.

As a member of Webmonkey, you can now:

edit articles
add to the code library
design and write a tutorial
comment on any Webmonkey article

Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.

If you cannot find it in your in-box, please check your bulk or junk folders.

Webmonkey is a property of Wired Digital.

Use Transparent PNGs in IE6

/skill level/

/viewed/

0 Times

1 Introduction
2 What you'll need
3 Code and Explanation
4 Suggested readings

Introduction

You don't need fancy javascript libraries to make a transparent PNG file work correctly in Internet Explorer 6. All you need is to follow a few simple rules in your CSS.

What you'll need

Just your favorite text editor!

Code and Explanation

First of all, put the regular transparent PNG image in your HTML:

<div id="png-holder"><img src="/images/transparent.png" alt="" /></div>

That will work perfectly in Firefox, Safari, and IE7. To make it work in IE6, add the following to your IE6 stylesheet:

#png-holder {
	width: 300px;
	height: 150px;
	text-indent: -9999px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='crop');
}

That filter rule is a proprietary Microsoft code that will force IE6 to render the alpha transparency in the PNG - but it does it by drawing another box on top of everything on the page and sticking the png in there, which leads to some odd behavior. Here's the breakdown:

You must use the filter on a containing element for the PNG, not the image itself. For this reason, it's easiest to wrap the image in a DIV or P tag.
You must declare a width and height for the container matching the width and height of the image.
You have to hide the original image - hence the text-indent: -9999px; rule. You can do the same thing to a transparent PNG that you've set as a background on a div by using background: none; instead.
You must use an absolute path to the image. As far as I can tell, this is just a restriction of the filter.
You can set sizingMethod to crop, which means if the image is larger than the dimensions of your container, the overflow will be hidden. Alternately, you can set it to scale, which will stretch the image to fit.
If you absolutely position the PNG over other content on your page, the user will not be able to click on any links under the image. That's because the filter is drawing a new box on top of everything, completely overriding your z-index rules.