Member Avatar for CassieJ

Hi,

Does anyone have a simple and effective fix for ie6's inability to view images with transparent backgrounds?

I've tried Microsoft's fix but it doesn't fix it - it is highly possible that I am doing something wrong but I followed their instructions. Either way I just wondered what other methods were around, I don't normally need to use transparency but I have a site in progress that simply can't do without them!

Thanks in advance.

Cassie

  • 4 Contributors
  • 6 Replies
  • 131 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by autocrat

Dani AI

Generated

This thread shows the usual trade-offs: small GIF fallbacks, JS fixes and IE-only filters were suggested by , and . For a pragmatic, low-risk solution that keeps the logo crisp in IE6 without relying on brittle filters or client scripts, create an IE6-specific, precomposited image and serve it only to IE6 users.

Steps (simple workflow)

  1. Identify the page background where the logo sits (solid color is easiest).
  2. In an image editor (Photoshop/GIMP), add a layer filled with that background color beneath the logo and shadow, then flatten. This bakes the antialiased edges against the exact matte color so the shadow looks smooth on that page.
  3. Export the flattened file as a non-alpha image (PNG or GIF). PNG-8 with proper dithering/matte gives a small file; PNG-24 without alpha retains quality.
  4. Deliver that image only to IE6 using an IE conditional so modern browsers keep the proper PNG24 with alpha.

Example of an IE6-only swap (place in the head; CSS approach shown)

<!--[if lte IE 6]>
<style>
.logo { background-image: url("logo-ie6.png") !important; }
</style>
<![endif]-->

Notes and cautions

  • If the site background is not a single color (patterns, gradients), precompositing is harder; in those cases use a lightweight JS PNG fix or provide a non-shadowed fallback. Filters like Microsoft's AlphaImageLoader often introduce positioning, z-index and performance issues, so they are best avoided for layout elements.
  • Given how old IE6 is, weigh analytics: if IE6 traffic is near zero, it may be simpler to let modern PNGs render correctly and accept a degraded look in IE6.

Recommended Answers

All 6 Replies

Member Avatar for HI2Japan

What about using a gif instead?

Member Avatar for macneato

Its pretty simple to do with a little js. But i won't be spoon feeding you. Visit the URL below.

Read a bit... and intergrate. Best way to learn is to practice. If you stuck, just ask.

Member Avatar for CassieJ

Thanks hi2japan, I wish it were that simple. The issue is the transparent backround in ie6, file extension wouldn't fix despite my hoping otherwise :) Appreciate the suggestion tho!

Thanks Macneato, I'm about to look at the site you posted now. Be assured, spoon feeding is not desired nor required. Appreciate your assistance :).

Cassie

Member Avatar for autocrat

MAybe a little late to the party... but are you wanting some form of "opaqueness" in the image (such as a drop shadow that can be partially seen through)?

If not, save the png with index transparency, as it's Alpha transparency that IE struggles with.

Alpha image filter should be able to be used in CSS files as well as in the main document as well, which means if it's part of the "design" (rather than the content), then you can slap that in.

Member Avatar for CassieJ

MAybe a little late to the party... but are you wanting some form of "opaqueness" in the image (such as a drop shadow that can be partially seen through)?

If not, save the png with index transparency, as it's Alpha transparency that IE struggles with.

Alpha image filter should be able to be used in CSS files as well as in the main document as well, which means if it's part of the "design" (rather than the content), then you can slap that in.

Yeah, I'm trying to use a shadowed logo. I have tried using png8 alpha transparency which does eliminate the issue of the greyish box, but unfortunatey it is not just slightly jagged with the shadow removed as a normal image would be, it's totaly jagged to the point it is horrid. When I use this with a normal image it's usable but not with the shadow.

Didn't want to have to use a js solution, but it appears I may have to until ie6 finally gets put out of its misery and buried somewhere far far away!

Thanks heaps for the help :)

Member Avatar for autocrat

Well, if you send a link to the site, I'll pop in and have a look.
sometimes it's possible to "re-organise" a little to avoid the problem anyway.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.