Member Avatar for MDanz

My png image with no background works in firefox, chrome etc.. but when it comes to ie6,ie7 i have to use the alphaimageloader filter. What is the common way professionals approach this problem? Websites like twitter the images with no background overlap with no problems when i load them in ie6.. help appreciated.

solution?

  • 3 Contributors
  • 2 Replies
  • 86 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by sagive

Dani AI

Generated

Brief note tied to the thread: is seeing the classic PNG-alpha problem in legacy IE. pointed to a JS-based fix (common and useful), and acknowledged it. Professionals usually avoid one-size-fits-all hacks and take one of three pragmatic routes: drop/limit IE6 support, serve simplified assets for old IE via conditional CSS, or use a well-tested PNG-fix library while accepting tradeoffs (performance, broken background-repeat, z-index quirks).

If supporting IE6 is required, a common, low-risk pattern is to swap styles only for that browser using conditional comments. Example:

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6-fixes.css">
<![endif]-->

Put simplified backgrounds or PNG8/GIF fallbacks in ie6-fixes.css rather than forcing filters on every element. If full alpha is essential, use a dedicated fix and test thoroughly; filters or automatic replacements can change stacking contexts and disable repeating backgrounds.

Quick troubleshooting checklist:

  • Confirm the file actually contains a full alpha channel (open in an editor).
  • Test the image as an <img> versus a CSS background to isolate the issue.
  • Verify caching/headers so IE is not serving an old file.
  • Test in a real legacy environment (VM or compatibility tool).

In most modern projects the cleanest choice is graceful degradation: keep the layout functional in IE6 rather than fragile, per-pixel parity.

Recommended Answers

All 2 Replies

Member Avatar for sagive

Great Resource twiss, Thanks :)

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.