PNGs, the AlphaImageLoader Filter, and hasLayout

• Add Comment
• Tutorial
• 3.6.2008

I recently wrote an article discussing how to use PNGs effectively in all browsers (including IE6). For work, I had to slice a site that used a lot of PNGs, and I ran into something that I had never encountered before.

I was trying to use the Microsoft proprietary AlphaImageLoader Filter because they background images were PNGs that were going to scale to fit the background. The div that I was setting the PNG as the background to, did not have a height or width specified. Apparently, to use the AlphaImageLoader property, the element that you are using it on must have another Microsoft propriety property: hasLayout.

From the Microsoft Developer Network Site:

The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute.

An Example

I am going to use the same working example I used in my Ultimate PNG Guide. But this time, I am going to add the following to the head of the page:

<style type="text/css">
div#container div.inner { width: auto; }
</style>

Obviously not how you would want to really add that style to the page, but I am just trying to prove that in IE6, to use a PNG with the AlphaImageLoader Filter applied, the element must have layout. So here is the new page, which should be broken in IE6.

So there you have it, remember to give elements layout if you are going to use the AlphaImageLoader Filter.

RSS feed of comments for this entry