Member Avatar for HelenLF

Hi,

I have a png image which is 8 x 4 px and shows a white semicircle on a transparent background. This image is repeated across the width of the page (repeat-x). It works well in all browsers except IE6 where it shows as a thick blurry line. I already have a pngfix script and the other transparent png images that are on the webpage work fine.

I have had a Google but whereas I have found postings with the same problem, there doesn't seem to be a quick and easy solution. Does anyone know of a fix for this problem.
If all else fails, I'll resort to using a different image of IE6.

Thanks in advance.

  • 2 Contributors
  • 2 Replies
  • 127 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by HelenLF

Dani AI

Generated

posted the classic IE6 PNG-repeat problem: a tiny 8×4 semi‑circle PNG tiles fine everywhere except IE6, which shows a thick, blurry line. is right that IE6 doesn’t handle alpha-channel PNG backgrounds the way modern browsers do, and most JS fixes work by using IE’s AlphaImageLoader (or VML) which does not truly tile and can stretch or alter the image, producing the blurry seam you’re seeing.

Quick checks to narrow it down:

  • Turn off whatever PNG-fix script temporarily. If the blur disappears, the filter/behavior is the cause.
  • Replace the PNG with a plain solid-colour version (or a small GIF/PNG8) that matches the page background. If that renders cleanly, the issue is alpha edges and tiling.
  • Ensure the element height is an integer multiple of the tile height. Partial tiles can reveal anti-alias seams.

Practical fixes (ordered by simplicity/reliability):

  • Serve a non-alpha fallback to IE6 via conditional comments (fast, bulletproof). Example:

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

    Make the fallback image precomposed on the page background (no alpha). That’s exactly what you ended up doing with GIFs, and it’s the least brittle approach.

  • If you need smooth antialiased edges and cannot accept jagged GIF/PNG8 results, pre-render a wider, single-row image that already contains the repeated pattern (a 1-row sprite) and use that as a static background. It avoids tiling math and filter scaling.

  • Long-term (post-IE6): recreate the effect with CSS/SVG so modern browsers get scalable, crisp rendering and IE6 can keep a simple fallback.

Summary: for IE6 the most practical solution is a non-alpha fallback served only to IE6. That avoids AlphaImageLoader tiling artifacts and keeps the layout stable.

Member Avatar for kevinkace

ie6 does not support repeating trans pngs. If you have a script to bypass this, then perhaps paste here what it is.

Member Avatar for HelenLF

I had looked at the solution here...
http://blog.creonfx.com/internet-explorer/ie6-png-transparency-css-background-repeat-fix

However, it didn't seem to help. I then looked at the solution below, using the optional js file.
http://www.twinhelix.com/css/iepngfix/demo/

The repeating image I am using is a semicircle with a transparent background which repeats horizontally across the whole page. I decided to use instead 3 different repeating gif images with the previously transparent part a different colour to suit the background. A bit messy, but the end result is much better.

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.