#1
  1. /*
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2007
    Location
    Sydney, Australia
    Posts
    729
    Rep Power
    624

    Transparent PNG's - Internet Explorer


    Good Evening Folks,

    I would like to discuss Transparent PNG files and Internet Explorer.

    I like to use 24-bit PNG files with transparency in my web work.
    I like to overlay transparent backgrounds onto images with text
    formatted over the top.

    I like to use transparent PNG's as backgrounds for buttons, text and boxes
    all over the place, I even like using them to mask out images.

    I am very keen on using 24-Bit transparent PNG files in web design.

    The only thing that really stops me or at least puts me off using them
    is compatability problems with IE6 and below. IE7 doesn't seem to have
    any problems with them.

    I have found away to make 24-Bit transparent PNG files work in IE6,
    It requires using a proprietary IE filter called AlphaImageLoader
    I am still experimenting with it, but It seems to work OK utilising a few @import hacks.

    But I can't make this filter work in IE5.5 or IE5, although Micro$oft's
    doccumentation says I should be able to make it work in 5.5. Anyway I
    could always use @import hacks to make IE5 browsers use GIF images
    instead or maybe even JPGs.

    Now to me this is a lot of mucking around, I accept that a lot of people still use IE6 but how many people are still using IE5.5 and IE5?
    Does anyone have any other theories or ideas on how to go about this?
    Last edited by benno32; July 20th, 2007 at 09:27 AM.
    */
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2006
    Posts
    160
    Rep Power
    38
    Did you try 24bits PNG indexed without any js or hack ?
    http://wiki.mozilla.org/Fixing_transparent_PNGs
  4. #3
  5. /*
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2007
    Location
    Sydney, Australia
    Posts
    729
    Rep Power
    624
    That is a good idea, the indexed PNG works a lot better than a GIF,
    however an indexed image can't handle tints and blends of colour.
    example: a 20% screened tint that can be overlayed onto an image.

    So my workaround becomes:
    IE6: use the proprietary AlphaImageLoader

    IE5.5 and 5: Use an Indexed 24-BIT PNG

    Everything else is treated normally.

    I have not used any Javascript to accomplish this, I have kept all
    the code in CSS, so I don't have any issues with people who have
    disabled JS.

    The link you gave pointed to this page:
    http://www.nrkn.com/alpha/

    It is a classic example, the alpha transparency works in IE7 and IE6
    thanks to the AlphaImageLoader, but in 5 and 5.5 it looks very ordinary.
    */
  6. #4
  7. /*
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2007
    Location
    Sydney, Australia
    Posts
    729
    Rep Power
    624
    OK...I found a nice little DHTML project:

    IE PNG Fix v1.0 RC4
    http://www.twinhelix.com/css/iepngfix/

    By using a little bit of Javascript and adding one extra behaviour line to
    a Stylesheet. The script will automatically apply the Microsoft AutoImageLoader to any <img> tag natively. It will also support CSS backgrounds (although without repeat) natively. This works on both IE6 and IE5.5. Not 5 and below though.

    I know this breaks the rules a little bit but by implementing this script I am confident enough to forge ahead with 24BIT PNG's with all the benefits of full Alpha Transparency support.

    Go on try it, you'll be suprised by how well it works.
    */

IMN logo majestic logo threadwatch logo seochat tools logo