Posts Tagged ‘ie6 hacks’

And yet MORE png hacks for IE6…

Thursday, March 11th, 2010

And the best part? Its not a pain in the ass! I found this while tooling around Chris Coyier’s site css-tricks.com yet again. I was just going through his snippets to see what was there, and I believe this is some CSS I will use quite a bit. No javascript required, but I would use this in a conditional style sheet specifically for IE6.

.yourselector {
       width:200px;
       height:100px;
       background: url(/folder/yourimage.png) no-repeat;
       _background:none;
       _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}

If you DO use a conditional stylesheet, drop the underscores in the properties.

This ONLY works on background images that do NOT repeat. This will NOT work on inline html images. There is another thing for that, but it requires the use of a 1×1 pixel transparent gif. At that point, I probably would go with the png javascript fix.

EDIT: The container also needs to have a fixed width and height.