56 users online (1 members and 55 guests)  


  Results 1 to 7 of 7
  1. #1
    dpbklyn's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2007
    Posts
    20

    PNG Transparency OR, how I totally screwed up...

    Any help would be appreciated.
    I use IE7 and I designed a site using PNGs and the site looks great on IE7! On IE6 it looks like S&*t since IE 6 doesnt recognize the alpha channel on PNGs.

    We didnt use GIFs because we were constantly getting white jaggies around the transparent buttons that lay over a pretty complex BG.

    I am about to re-design the site using either JPGs or GIFs and was wondering if:

    A. There is a way to use PNGs in versions of IE (pre 7); or,

    B. There is a surefire way to remove the jaggies from the GIFs.

    I appreciate ANY HELP.

    Thank you,
    dp
    Last edited by dpbklyn; 12-27-2007 at 03:42 PM. Reason: Changed the title to be more descriptive

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: PNG Transparency OR, how I totally screwed up...

    Hi there dpbklyn,

    you can see an example here...
    http://mysite.orange.co.uk/azygous/IE_6_png.html
    ...and the code here...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css" media="projection, screen">
    body {
        background-color: #add8e6;
     }
    </style>
    
    <!--[if IE 6]>
    <style type="text/css" media="projection, screen">
    #test{ 
    background-image:expression(
     this.runtimeStyle.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' +this.src+ '", sizingMethod="image")',
     this.runtimeStyle.backgroundImage='none',
     this.src='images/blank.gif'
     );
    }
    </style
    <![endif]-->
    
    </head>
    <body>
    
    <h1>PNG alpha transparency that works in IE 6</h1>
    <p>
    <img id="test" src="images/shadow_ball.png" alt="" />
    </p>
    
    </body>
    </html>
    This method requires a blank/transparent .gif image in addition to the .png image for IE 6.
    I have highlighted these images in red.
    It does not have to be the same size as the .png image.
    The one that I used for this example measures 16x16 pixels.
    Last edited by HTML; 03-09-2012 at 10:27 AM.

  3. #3
    dpbklyn's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2007
    Posts
    20

    Re: PNG Transparency OR, how I totally screwed up...

    Thank you.

    Since posting I did a bunch of research and tried many of the solutions I have found. Most of the solutions had a bug here or there, but the one consistant bug is that they didn't work well with image maps.

    Do you have any experience using image maps with this solution?

    Thank you,

    dp

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: PNG Transparency OR, how I totally screwed up...

    Hi there dpbklyn,

    the method that I posted will work with an image map in IE 6, provided that the blank image has the same dimensions as the img used for the image map.

  5. #5
    dpbklyn's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2007
    Posts
    20

    Re: PNG Transparency OR, how I totally screwed up...

    Thank you!

    I have decided to use:
    http://homepage.ntlworld.com/bobosola/pnghowto.htm
    and remove the image maps and re-work some pages. It is a pain in the butt, but at least I know it will work...

    Again, THANK YOU!!

  6. #6
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: PNG Transparency OR, how I totally screwed up...

    No problem, you're welcome.

  7. #7
    ibeadling's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2008
    Posts
    1

    Re: PNG Transparency OR, how I totally screwed up...

    Thank you very much, that was an excellent post, not to mention, the most user-friendly.



Tags for this Thread