And yet MORE png hacks for IE6…

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.

Tags: ,

4 Responses to “And yet MORE png hacks for IE6…”

  1. I’m glad you found a solution that’s at least a lot less complex than the other things we’ve seen out there. However, I do think we should stop accommodating to IE6. It’s gotta start somewhere, right?

  2. jcDesigns says:

    Well….I know I would like to. But the reality is, the company I work for keeps track of what the visitors of our sites use. IE6 still accounts for about 25-30%. Which seems incredible to me, but there it is.

    In reality though, if I do have to do anything to make IE6 behave, it isn’t much. What I generally end up with now is png background images for the modern browsers and an _background-image with a gif for 6. Not too bad really. The thing that sucks with 6 and 7 is the lack of support for selectors, and of course the cool stuff you can do with CSS3. That is where the whole “graceful” degrading thing comes in. I just try to come as close as possible. It is where you break a layout that it is a problem. If you are coding correctly though, this shouldn’t be an issue.

    Most people have issues with the double margin thing in 6. If you just use display:inline on the divs you are margining, no problems.

  3. Yeah, I understand. Luckily I’m not in a position where my ability to feed myself depends on my web design, so I can be stubborn. It’s simple economics that technologically outdated means of doing business will exist as long as they are profitable and selective pressures against them do not exist. Nonetheless, Good find. I’ve seen some stupidly complex ways to fix the png transparency in IE6, and this seems a lot simpler.

  4. jcDesigns says:

    Actually, my favorite IE6 png fix is is the Fireworks png-8 solution. If you have FW, search my blog for it. Doesn’t work on some stuff, but I have used it a few times to great success. The sucky part is that Photoshop can’t handle it.

Leave a Reply to Joseph McCullough