Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts

    W3C Transparent PNG's

    Has anyone ever noticed that W3C's transparent PNG's that you use to show you page is validated work as transparent PNG's in both IE and Firefox, whereas when I create my own transparent PNG's they don't?

    Anybody have any idea how the hell they do it?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    I imagine the W3C PNG is in the PNG8 format (with binary opacity, like GIF89a), rather than PNG24 (with multi-level opacity), which is the one that IE6 and below has issues with.

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Ah, so IE utilises the transparency of PNG-8's? I didn't know that, thanks very much!
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ahallicks View Post
    Has anyone ever noticed that W3C's transparent PNG's that you use to show you page is validated work as transparent PNG's in both IE and Firefox, whereas when I create my own transparent PNG's they don't?

    Anybody have any idea how the hell they do it?
    The PNG is in 8bit format so it keeps the transparency, if you save the PNG as 24bit with a transparency IE doesn't know how to handle it yet FireFox does
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Or to explain it in simple words: If an 8 bit PNG has alpha transparency then it will be displayed like that in modern browsers but IE will make the partially transparent parts 100% transparent.

    At least that's a better fallback behavior than making a greyish blue background.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by VIPStephan View Post
    Or to explain it in simple words: If an 8 bit PNG has alpha transparency then it will be displayed like that in modern browsers but IE will make the partially transparent parts 100% transparent.

    At least that's a better fallback behavior than making a greyish blue background.
    Afaik, 8-bit PNGs cannot be saved/generated with partially transparent pixels.
    Pixels are either fully transparent or fully opaque, no?

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by ahallicks View Post
    Anybody have any idea how the hell they do it?
    If you have Adobe Photoshop, you can go to Image > Mode > Indexed Color to save the image as 8‐bit. If you have the GIMP, you can go to Image > Mode > Indexed to do the same. 8‐bit PNG images are undesirable because, like GIF images, you’re restricted to 256 colors and binary transparency.

    Quote Originally Posted by Bill Posters View Post
    Afaik, 8-bit PNGs cannot be saved/generated with partially transparent pixels.
    Pixels are either fully transparent or fully opaque, no?
    8‐bit PNG images only support on or off transparency. You need to use 24‐bit PNG images for alpha transparency.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Quote Originally Posted by Bill Posters View Post
    Afaik, 8-bit PNGs cannot be saved/generated with partially transparent pixels.
    Pixels are either fully transparent or fully opaque, no?
    That is correct for GIFs. I can save 8 bit PNGs with alpha transparency in Fireworks. The shadow of my navigation on my website is an 8 bit PNG (only visible in modern browsers).

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by Macrodobia
    http://www.adobe.com/cfusion/knowled...fm?id=tn_14647

    ...

    Alpha transparency allows an object with a transparent background in these programs to display semi-opaque pixels. Normally an image has to be optimized to 32 bit (millions of colors) color depth to accommodate the Alpha channel. 8 bit PNG files can also be saved with a transparent Alpha if they are saved with a 32 bit color palette. The Adaptive palette in Fireworks is 32 bit, so if a PNG8 is optimized using the Adaptive palette, it will have an alpha transparency.
    http://www.adobe.com/cfusion/knowled...fm?id=tn_14647

    I never used FW, so that's new to me.

    Kinda makes me wonder... If the FW "PNG8" can actually have a 32-bit palette, what makes it a PNG8?
    i.e. can/should it really be called an 8-bit PNG /PNG8?

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,930
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Hm, never thought about that... I'm indeed using an adaptive palette. It shows the colors with a small "transparency" rectangle... ah just watch yourself: http://i154.photobucket.com/albums/s...an/8bitpng.jpg

  • #11
    Regular Coder
    Join Date
    May 2002
    Location
    Helsinki, Finland
    Posts
    231
    Thanks
    0
    Thanked 1 Time in 1 Post
    You happen to know any alternate programs (preferably free) that allow saving partially transparent PNG8's?
    Zvona
    First Aid for
    Web Design

  • #12
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    steph check your PMs

  • #13
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    If anyone is interested there is quite a good work around to allow for transparent PNG's in both IE and FF... the only problem is it is a solution for the present and if IE eventually allow for [] tags in CSS this method will not work. However, the hope would be that, by then they also accept alpha transparency in PNG24's, which would be truly awesome.

    The work around, which does actually work too, can be found here
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #14
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by ahallicks View Post
    If anyone is interested…

    The work around, which does actually work too, can be found here
    Similarly, if/when invalidating yer CSS isn't going to stop you, then you may as well use this, which targets just the browsers that we know to be a problem…

    Code:
    .blah {
    	background: url(my_semi-opaque.png);
    }
    
    * html .blah {
    	background: none;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my_semi-opaque.png',enabled=true,sizingMethod=scale);
    }
    (* html rules are ignored by IE7 which supports PNG24 as it should.)


    However, it's preferable to shove all that non-standard, proprietory, IE stuff into its own stylesheet and bring that in after the main stylesheet, between some conditional comments.

    e.g.

    main.css
    Code:
    .blah {
    	background: url(my_semi-opaque.png);
    }
    iewin6.css
    Code:
    .blah {
    	background: none;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='my_semi-opaque.png',enabled=true,sizingMethod=scale);
    }
    markup
    Code:
    <style type="text/css">
    
    	@import url(/main.css);
    
    </style>
    
    <!--[if lt IE 7]>
    <style type="text/css">
    
    	@import url(/iewin6.css);
    
    </style>
    <![endif]-->
    This approach is also much more in keeping with the notion… "write it for FireFox then hack it for IE.".

    Last edited by Bill Posters; 02-08-2007 at 06:09 PM.

  • #15
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by ahallicks View Post
    the only problem is it is a solution for the present and if IE eventually allow for [] tags in CSS this method will not work. However, the hope would be that, by then they also accept alpha transparency in PNG24's, which would be truly awesome.
    This already happened several months ago. It’s called Internet Explorer 7. It recognizes both attribute selectors and PNG alpha transparency.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •