{"authorId":"1","title":"PNGs, the AlphaImageLoader Filter, and hasLayout","slug":"pngs-the-alphaimageloader-filter-and-haslayout","postDate":1204842302,"expiryDate":null,"enabled":"1","fields":{"2":"<p>I recently wrote an article discussing <a href=\"http:\/\/trevordavis.net\/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>\n<!--more-->\n<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>\n\n<p>From the Microsoft Developer Network Site:<\/p>\n<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>\n<\/blockquote>\n\n<h2 class=\"replaceHeadline\">An Example<\/h2>\n<p>I am going to use <a href=\"http:\/\/trevordavis.net\/play\/pngs\/example-4\/\">the same working example<\/a> I used in my <a href=\"http:\/\/trevordavis.net\/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>\n<div class=\"codeblock\"><code>\n&lt;style&nbsp;type=\"text\/css\"&gt;<br \/>div#container&nbsp;div.inner&nbsp;&#123;&nbsp;width:&nbsp;auto;&nbsp;&#125;<br \/>&lt;\/style&gt;&nbsp;\n\n<\/code><\/div>\n\n<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=\"http:\/\/trevordavis.net\/play\/pngs\/pngs-and-haslayout\/\">So here is the new page, which should be broken in IE6.<\/a><\/p>\n\n<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>","14":{"old_id":{}}}}