<p>I recently wrote an article discussing <a href="//trevor-davis.com/blog/tutorial/the-ultimate-png-guide/">how to use PNGs effectively in all browsers (including IE6)</a>. 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.</p>

<p>I was trying to use the Microsoft proprietary <a href="http://msdn2.microsoft.com/en-us/library/ms532969(VS.85).aspx">AlphaImageLoader Filter</a> because they background images were PNGs that were going to scale to fit the background. The <code>div</code> 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: <a href="http://msdn2.microsoft.com/en-us/library/ms533776.aspx">hasLayout</a>.</p>

<p>From the Microsoft Developer Network Site:</p>
<blockquote><p>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 <strong>height</strong> or <strong>width</strong> property, setting the position property to <strong>absolute</strong>.</p>
</blockquote>

<h2 class="replaceHeadline">An Example</h2>
<p>I am going to use <a href="//trevor-davis.com/play/pngs/example-4/">the same working example</a> I used in my <a href="//trevor-davis.com/blog/tutorial/the-ultimate-png-guide/">Ultimate PNG Guide</a>. But this time, I am going to add the following to the head of the page:</p>
<div class="codeblock"><code>
&lt;style type="text/css"&gt;<br />div#container div.inner { width: auto; }<br />&lt;/style&gt; 

</code></div>

<p>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 <strong>have layout</strong>. <a href="//trevor-davis.com/play/pngs/pngs-and-haslayout/">So here is the new page, which should be broken in IE6.</a></p>

<p>So there you have it, remember to give elements <strong>layout</strong> if you are going to use the <strong>AlphaImageLoader Filter</strong>.</p>