Member Avatar for reihaan

Hi,
how can i fix the .png issue using css for internet explorer?

  • 4 Contributors
  • 6 Replies
  • 113 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by reihaan

Dani AI

Generated

A short, practical summary and two maintainable ways to handle PNG alpha in legacy IE, building on remarks from , and .

A simple, robust pattern is to serve an IE-only stylesheet (via conditional comments) that swaps the PNG for a GIF/sprite for elements that need transparency. This keeps HTML/CSS clean, avoids JavaScript dependencies and works for users who have scripts disabled:

<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6-fallback.css" />
<![endif]-->

/* ie6-fallback.css */
.icon {
  background-image: url("images/icon.gif");
  width: 32px;
  height: 32px;
}

If the visual requires partial alpha (soft edges), an IE-only CSS rule using Microsoft’s AlphaImageLoader filter can be used, but it has important caveats: it does not support background-repeat/position the same way, it can affect rendering/printing and performance, and the target element must have layout (explicit width/height or zoom:1). Use this only when GIFs or sprite tricks won’t produce the needed visual:

<!--[if lte IE 6]>
<style>
.icon {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/icon.png', sizingMethod='crop');
  width: 32px;
  height: 32px;
  zoom: 1;
}
</style>
<![endif]-->

Recommendation: prefer the GIF/sprite fallback for UI icons and small graphics (as suggested). Reserve the AlphaImageLoader or a JavaScript polyfill (as mentioned by ) only when full alpha is essential. For modern projects, consider dropping IE6 support altogether and rely on graceful degradation instead; if support is required, verify fixes in an actual IE6 environment (virtual machine) rather than relying on screenshots or emulators.

Recommended Answers

All 6 Replies

Member Avatar for MJ Pieterse

it would help if you actually say what your issue is...

Member Avatar for reihaan

The issue is the image missing PNG-Transparency in Windows Internet Explorer 5.5 & 6.
How can i fix that error.?

Member Avatar for Kraai

It looks like a JS code might do the trick. Here is more info for you:

Member Avatar for MJ Pieterse

well, either js or save it as gif

i would suggest gif. the image size will be smaller and it will help with people who have js turned off.

Member Avatar for Arkinder

It's not an error, IE simply lacked the support for the format. For loading times sake, use the gif format. If the png format is absolutely necessary, use the JavaScript code posted by Kraai. Both are excellent solutions.

Regards, Arkinder

Member Avatar for reihaan

Thankyou all of you.:)

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.