2 Replies Latest reply on Jun 29, 2010 10:51 AM by johngordon12

    PNG Transparency Fix for IE6

    johngordon12 Level 1

      Hope somone can help with this. Basically I have a PNG image with a transparancy to sit over a gradient background, like this :

       

      http://www.hpwebdesign.co.uk/mklink/index102.shtml

       

      The little graphics next to campaign metrics are OK, but the main header image they sit in with the light blue gradient and hand graphic etc is not - the little areas around the curved corners should be transparent but are not (in IE6).

       

      I assume this is because that is a background image for the <div> being referenced in the CSS, rather than dropped into the page directly.

       

      So I guess my question is can this be overcome?

       

      Thanks.

        • 1. Re: PNG Transparency Fix for IE6
          bemdesign Level 4

          IE 6 doesn't support transparent PNGs natively. You will either have to resort to Javascript hacks to force IE 6 to render it correctly (although these do not work for repeated background images in CSS), use a lowest common denominator image format (GIF), or use conditional commenting to give IE 6 it's own stylesheet with it's own image to get something somewhat like what the other browsers will see.

           

          Or just not worry what IE 6 sees as long as your site content is accessible and usable.

          1 person found this helpful
          • 2. Re: PNG Transparency Fix for IE6
            johngordon12 Level 1

            Cheers for that.

             

            I'm already using the fix for IE6 - it just doesn't seem to fix it for images in the CSS.

             

            But reading that, I think the easiest solution will be to use an image without the rounded corners for IE6.