SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)

    IE6< PNG8 alpha transparency

    Hi,

    http://www.sitepoint.com/examples/8bit/

    I'm trying to make an example like the above work in IE6< using IE's Alpha Image Loader filter, but can't seem to get it.

    Does any have a solution to this they can recommend?


    Thanks,

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Mark,

    I'm not sure what you are asking exactly.

    The point about the sitepoint article was that you can use the png8 for ie without needing to use the filter because it reverts to index transparency.

    I used it for the round corners in this demo.

    If you can explain what you meant exactly then perhaps I can give a better answer

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    yep, but i've heard there's a way to get Alpha transparency to work in IE6< also. I found a good example using iepngfix.htc to help twist ie's arm.. but it's still got issues, I was wondering if the IE filter can be used to make the same thing work in IE6< ?

    Cheers,

  4. #4
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    These methods work with 32-bit png's and their alpha transparency, but not 8-bit with alpha transparency.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes you need to use 32bit pngs and the you can do examples like this.

    http://www.pmob.co.uk/temp/transparent-test4.htm

    The pngfix.htc is just a javascript solution of implementing the alpha image loader. It goes through the document searching for pngs and if its a foreground image it basically turns them into background images and applies the alpha filter to them.

    I find the pngfix more trouble than its worth in most cases as it has to guess whether you want the image cropped or scaled or image size.

    Just apply the filter to the image as required remembering that you cannot repeat or position an image used with the alpha image loader.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hmm, It seems that the alpha image loader works ok on that sitepoint example so it does seem ok on 8 bit pngs.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>8-Bit PNG transparency  in Fireworks Test</title>
    <style type="text/css">
    body {
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#fff;
    /*background-image:url(/images/blogs/design/transparency2.gif);*/
    background-image:url(http://www.sitepoint.com/images/blogs/design/tile3.jpg);
    margin:0;
    padding:0;
    }
    h1 {
    background-image:url(http://www.sitepoint.com/images/blogs/design/tile4.png);
    margin:0;
    padding:.5em 0;
    text-align:center
    }
    body img {
    left:50&#37;;
    position:relative;
    margin-left:-63px
    }
    p.image{
        background:url(http://www.sitepoint.com/images/blogs/design/8bit-trans.png) no-repeat left top;
        width:127px;
        margin:auto;
        height:159px;
    }
    
    * html p.image {    
        background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.sitepoint.com/images/blogs/design/8bit-trans.png',sizingMethod='image');
    }
    </style>
    </head>
    <body>
    <h1>8-Bit PNG transparency  in Fireworks Test</h1>
    <p class="image"></p>
    </body>
    </html>

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Yay

    Thanks Paul, so where did the myth the 8 bit PNG's don't work in IE come from?

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Can this be made to work with inline images?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Can this be made to work with inline images?
    The alpha image loader only works on background images. The pngfix gets around this by finding png images in the html and then changes them to a fully transparent 1px x 1px gif instead and then applies the real image to the background of an inserted span and then applies the filter (or something like that as techniques vary).

    http://www.twinhelix.com/css/iepngfix/demo/

    Essentially they are doing something that eventually looks like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>8-Bit PNG transparency  in Fireworks Test</title>
    <style type="text/css">
    body {
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#fff;
    /*background-image:url(/images/blogs/design/transparency2.gif);*/
    background-image:url(http://www.sitepoint.com/images/blogs/design/tile3.jpg);
    margin:0;
    padding:0;
    }
    h1 {
    background-image:url(http://www.sitepoint.com/images/blogs/design/tile4.png);
    margin:0;
    padding:.5em 0;
    text-align:center
    }
    body img {
    left:50&#37;;
    position:relative;
    margin-left:-63px
    }
    
    * html p.image{
        width:127px;
        margin:auto;
        height:159px;
    }
    * html p.image img{display:none;}
    
    * html p.image {    
        background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.sitepoint.com/images/blogs/design/8bit-trans.png',sizingMethod='image');
    }
    </style>
    </head>
    <body>
    <h1>8-Bit PNG transparency  in Fireworks Test</h1>
    <p class="image"><img src="http://www.sitepoint.com/images/blogs/design/8bit-trans.png" alt="image test" /></p>
    </body>
    </html>
    Thinking about it you could use a fully transparent gif for your image. Resize it to be the same size as the image you need and then apply the real image as a background of that image and then apply the filter to it. Brilliant if I don't say so myself.

    This gives you the benefit of the image being in the html (with alt and title attributes etc and of course assuming that the image is content.)

    Something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>8-Bit PNG transparency  in Fireworks Test</title>
    <style type="text/css">
    body {
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#fff;
    /*background-image:url(/images/blogs/design/transparency2.gif);*/
    background-image:url(http://www.sitepoint.com/images/blogs/design/tile3.jpg);
    margin:0;
    padding:0;
    }
    h1 {
    background-image:url(http://www.sitepoint.com/images/blogs/design/tile4.png);
    margin:0;
    padding:.5em 0;
    text-align:center
    }
    body img {
    left:50%;
    position:relative;
    margin-left:-63px
    }
    
    .pngtest {
        background:url(http://www.sitepoint.com/images/blogs/design/8bit-trans.png) no-repeat
    }
    * html .pngtest {    
        background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.sitepoint.com/images/blogs/design/8bit-trans.png',sizingMethod='image');
    }
    </style>
    </head>
    <body>
    <h1>8-Bit PNG transparency  in Fireworks Test</h1>
    <p><img class="pngtest" src="blankpng.gif" width="127" height="159" alt="Light Bulb image" /></p>
    
    
    </body>
    </html>
    The blankpng.gif image is a 1px x 1px fully index transparent gif. You just resize it with the html img attributes to be the size you want. This means you can use the same gif for all your images. Then just add a class to the image and apply the correct background to the image itself.

  10. #10
    SitePoint Addict CaryD's Avatar
    Join Date
    Nov 2006
    Location
    San Diego, CA
    Posts
    389
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Yay

    Thanks Paul, so where did the myth the 8 bit PNG's don't work in IE come from?
    Someone commented in a Sitepoint blog about trying to use png fixes for IE with 8-bit images and not having any success. I assumed the individual knew what he was doing. My bad.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Someone commented in a Sitepoint blog about trying to use png fixes for IE with 8-bit images and not having any success. I assumed the individual knew what he was doing. My bad.
    I was surprised it worked as well as I had always thought the filter was only for 32 bit pngs like everybody else. I guess it works on Fireworks 4 bit alpha channels as well.

    As an aside I have seen that Firefox has a couple of problems drawing 8 bit pngs and it seems to need to be refreshed at times or the alpha portion sometimes doesn't show.

    It was evident in this example with the rounded corners:

    http://www.pmob.co.uk/pob/simple-round-example7.htm
    (server seems to be down at time of posting )

  12. #12
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    That last example is a little funky in safari.

    For the example i'm working on I have used PNG's 8's and found the iepngfix.htc to work well for IE6<

    It only works when the background-position is the top left corner - And you can't repeat the images. Despite these limitations i've found it to work quite well. You can just add a single behaviour statement to all the elements you have with alpha transparent backgrounds, it doesn't seem to have any adverse effects in other browser either.

    The benefit of using PNG 8's seems to be the rendering of the images if something does go wrong with the alpha image loader. It degrades better than the 32 bit png.

    I'm using them extensively in a current project to create generic images that can be used over the top of changing background color's - Having alpha transparency in your toolbag makes a lot of design/technical challenges possible.

    Thanks Paul,

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mark
    That last example is a little funky in safari.
    I meant to post this link as I was working on the other one.

    (the other one's fixed now anyway as it was just a margin collapse on the h1)

    It only works when the background-position is the top left corner - And you can't repeat the images
    The alpha image loader has nothing in common with the background property and you are limited by the methods used via the sizingMethod attribute. It exists outside the normal scope of things and is not related to the background property at all.

    You can only place an image inside an element and the you have the options to either "crop", "scale" or "image" which basically do as you expect (with some caveats).

    You can't place it or repeat it like you can with a background image.

    That's a good idea of using it on 8 bit pngs then they will degrade more gracefully. I believe the filter needs javascript to be active to work but I've never checked this. The filter doesn't work in ie5 but should work in 5.5 though.


Bookmarks

Posting Permissions

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