SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Problems with transparent PNG + alpha filter under IE6&7

    I want to apply alpha opacity filter to transparent PNG file however I stumble a serious problems under IE6 and IE7 because one doesn't want to display transparency and the second displays sharp edgy inner corners.

    This is an example image

    http://hdd001.republika.pl/test8.png

    here is a html

    Code:
    <div class="example"></div>
    and CSS

    Code:
    .example {
    background-image: url(test8.png);
    background-repeat: repeat-y;
    filter:alpha(opacity=65);
    -moz-opacity:.65;
    opacity:.65;
    opacity:0.65;
    }
    Firefox and Safari display this fine however :

    IE6 - corners are smooth but no transparency
    IE7 - corners are sharp and bad looking, transparency is OK

    I wanted to use iepngfix.htc or AlphaImageLoader but it looks it doesn't like background images.

    any solution ?

  2. #2
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6 doesn't support PNG transparency. You will need to use a .gif.
    intragenesis, llc professional web & graphic design

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by holmescreek View Post
    IE6 doesn't support PNG transparency. You will need to use a .gif.
    not natively but this is why iepngfix.htc was introduced and using gif is no option as sharp edges are something present in every single browser

  4. #4
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    intragenesis, llc professional web & graphic design

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by holmescreek View Post

    It looks like you don't understand my problem, I need transparency+opacity+smooth edges, all in the same time under IE.

    Try to use what is written in this article and then apply alpha filter.

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

    First of all IE needs the element to have "haslayout" before the op-acity filter will work.

    IE6 can only crop, scale or leave at image size when you use the alpha image loader filter. It cannot position or repeat.

    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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    body{
    background:red
    }
    .example {
    background: url(http://hdd001.republika.pl/test8.png) repeat-y;
    filter:alpha(opacity=65);
    -moz-opacity:.65;
    opacity:.65;
    opacity:0.65;
    width:100&#37;;/* IE needs layuot*/
    }
    
    * html .example{
        background:none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://hdd001.republika.pl/test8.png',sizingMethod='scale');
    }
    
    
    </style>
    </head>
    <body>
    <div class="example">
        <p>this is some text : this is some text : </p>
        <p>this is some text : this is some text : </p>
        <p>this is some text : this is some text : </p>
        <p>this is some text : this is some text : </p>
    </div>
    </body>
    </html>
    However that won't be any good because the image will be stretched.

    Look at this example as to what you can do.

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


    The borders and the image have the filter applied but the borders are scaled so there is limited scope for using the fliter for any other uses.

    I would need to see your design to decide if it was possible or not but it sounds like its not possible for IE6.

    IE7 should understand png transparency ok.

  7. #7
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used this fix recently and it worked it pretty well, though it does have some issues depending on how the background image is applied/used (as Paul alluded to above - it won't work in all situations).

    If you carefully choose the matte color you can sometimes get away with an alpha transparent GIF, but I know it can be to much of a compromise for some situations.

    ^Is anyone aware of an IE 6 PNG fix that will allow you to position and/or repeat the background?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Is anyone aware of an IE 6 PNG fix that will allow you to position and/or repeat the background?
    No, It's not possible I'm afraid. All you can do is set the sizingMethod attribute of the alpha filter to crop, scale or image. There is no solution for positioning or repeating in IE6 and under.

  9. #9
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^That's what I was afraid of - I hadn't found anything and I dug around fairly thoroughly - of course to the boss who insists it must look exactly like the super rich, multi-overlayed, shadowed and glowed comp that the stakeholders bought into doesn't care much .

    Sometimes no means no, - even if you are used to never hearing it (hear me boss man?!). Apparently there is indeed not a publicly available complete hack/fix for every situation - sometimes we all need to be reminded of that I suppose.

    Ah, the bittersweet taste of compromise.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK this is an example of a layout

    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=iso-8859-1" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    body{ background-image: url('http://hdd001.republika.pl/bgtest.gif');}
    
    .a {
    background: url(http://hdd001.republika.pl/test8.png) repeat-y;
    filter:alpha(opacity=65);
    -moz-opacity:.65;
    opacity:.65;
    opacity:0.65;
    width:38px;
    height:200px;
    float:left;
    display:inline;
    margin:0px
    }
    
    .b{width:200px;background:green;display:inline;float:left;margin:0px}
    
    </style>
    
    </head>
    
    <body>
    
    <div>
    
    <div class="a"></div>
    <div class="b">bbbb</div>
    
    </div>
    
    
    
    </body>
    </html>
    I understand that eliminating white spots while having an opacity is not possible so I wonder if I can do something to that ugly edges in IE7

    I've add this to the <style>

    Code:
    img{ 
       behavior: url(iepngfix.htc); 
       }
    
    * html .a{
        background:none;
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://hdd001.republika.pl/test8.png');
    }
    but this is bad, however if div multiplying would be possible, who knows maybe it could work

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I understand that eliminating white spots while having an opacity is not possible so I wonder if I can do something to that ugly edges in IE7
    This seems to be a bug in ie7 where you are applying a png image at the same time as using opacity filter. If you remove the opacity filter then the pngs display: properly.

    Maybe you could use a transparent background png on a parent instead to get the effect you want instead of using filter:alpha(opacity=65);.

    Also note that the png fix is just for ie6 so make sure you are only giving ie6 (and ie5.5) the pngfix.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    This seems to be a bug in ie7 where you are applying a png image at the same time as using opacity filter.
    Do you think I should report it ?

    Quote Originally Posted by Paul O'B View Post
    Maybe you could use a transparent background png on a parent instead to get the effect you want instead of using filter:alpha(opacity=65);.
    yes I'm doing it right now but it's not exactly the solution I need

    Quote Originally Posted by Paul O'B View Post
    Also note that the png fix is just for ie6 so make sure you are only giving ie6 (and ie5.5) the pngfix.
    I'm aware of that fact and for the present moment I see only this solution :

    Special graphics for IE7 or switching to opacity PNGs only + GIFs for IE6

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Do you think I should report it ?
    lol -only if you want to waste your time Just remember it for next time and keep it with a list of all the bugs you come across so you don't have to keep remembering what they were. I've seen the same bug mentioned on other forums so its a known issue.

    I'm aware of that fact and for the present moment I see only this solution :
    Without seeing what the finished product should look like I can't really make a suggestion. I'm not sure why you can't use a transparent background png on a parent to give you the opacity effect. The benefits would be that the foreground content won't be made opaque which is usually what's wanted.

  14. #14
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I'm not sure why you can't use a transparent background png on a parent to give you the opacity effect. The benefits would be that the foreground content won't be made opaque which is usually what's wanted.
    I'm not sure I'm following your ideas without some example code.
    Right now it is just an IE6 and lower that need some extra coding, I can live with that and as soon as I'll finish my design you will understand my goals.


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
  •