Internet Explorer broken PNG support workaround (idea)

That's a very tidy fix. For users with Javascript enabled. While browser usage statistics are notoriously volatile and unreliable, Javascript statistics tend to suggest a steady 90% of users surf with it enabled. Since an IE behavior is just Javascript, this presents an obvious problem with the method above for 10% of visitors.

This simple method is easy, reliable, and - best of all - requires no scripting support.

Your HTML

<div id="logo"><span>Everything2</span></div>

Your CSS

#logo {
   display: block;
   height: 50px;   /* height of image */
   width: 100px;   /* width of image */
   background /**/: transparent url(images/logo.png) top left no-repeat;
   /* don't really break this next line */
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
             (src='images/logo.png',sizingMethod='scale');
}
#logo span {
   visibility: hidden;
}

Tell me that isn't much nicer. It also allows the use of Fahrner Image Replacement, so text-only browsers get some informative text instead. If you like, it's easy to add a link within the DIV. And it works for any browser supporting alpha transparency or Microsoft's crazy filters. Decent browsers are unpreturbed by the comment hack you see in the background attribute, while IE chokes and moves onto the next line. Conversely, standards compliant browsers ignore the non-standard filter attribute.

Of course, with Internet Explorer 7 on the horizon, we hope not to need this hack for much longer.