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.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts

    PNG Transparency support in IE 5.5+

    Hey guys,

    So I am trying to use PNG's on my site and include support for Internet Explorer 5.5 & 6. I understand this is an uphill battle, but have found a solution that works reasonably well. I don't know what I am doing wrong but it is not working.

    Check out the site http://bouncenbattle.com. I have included the behavior attribute inside a conditional statement so that it will validate, but it seems to be working only on some machines. Using the same machine, I witnessed it malfunctioning on my site but working on the source site's demo page.

    Perhaps the most consfusing part of this whole conudrum is the fact the image works from the index (inflatable.png) but the background images of the divs do not. Is this the problem, div backgrounds are not supported? What gives? Any help would be appreciated.

    Code:
    <!--[if IE]>
    <style type="text/css">
    img {
      behavior: url(transparency.htc);
      }
    </style>
    <![endif]-->
    transparency.htc
    Code:
    <public:component>
    <public:attach event="onpropertychange" onevent="doFix()" />
    
    <script type="text/javascript">
    
    // IE5.5+ PNG Alpha Fix v1.0RC4
    // (c) 2004-2005 Angus Turnbull http://www.twinhelix.com
    
    // This is licensed under the CC-GNU LGPL, version 2.1 or later.
    // For details, see: http://creativecommons.org/licenses/LGPL/2.1/
    
    
    // This must be a path to a blank image. That's all the configuration you need.
    if (typeof blankImg == 'undefined') var blankImg = 'images/spacer.gif';
    
    
    var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
    
    function filt(s, m)
    {
     if (filters[f])
     {
      filters[f].enabled = s ? true : false;
      if (s) with (filters[f]) { src = s; sizingMethod = m }
     }
     else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
    }
    
    function doFix()
    {
     // Assume IE7 is OK.
     if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
      (event && !/(background|src)/.test(event.propertyName))) return;
    
     var bgImg = currentStyle.backgroundImage || style.backgroundImage;
    
     if (tagName == 'IMG')
     {
      if ((/\.png$/i).test(src))
      {
       if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
        style.width = offsetWidth + 'px';
       filt(src, 'scale');
       src = blankImg;
      }
      else if (src.indexOf(blankImg) < 0) filt();
     }
     else if (bgImg && bgImg != 'none')
     {
      if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
      {
       var s = RegExp.$1;
       if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
        style.width = offsetWidth + 'px';
       style.backgroundImage = 'none';
       filt(s, 'crop');
       // IE link fix.
       for (var n = 0; n < childNodes.length; n++)
        if (childNodes[n].style) childNodes[n].style.position = 'relative';
      }
      else filt();
     }
    }
    
    doFix();
    
    </script>
    </public:component>
    Last edited by colindunn; 10-16-2007 at 11:44 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    How about changing your html like
    Code:
    <div id="frame">
      <div id="inflatable"> <!--img alt="inflatable" src="iinflatable.png"--> </div>
    </div>
    and CSS like

    Code:
    div#inflatable {
        position: absolute;
      bottom:0;
      left:468px;
      width: 417px;
      height:346px;
      background:url(inflatable.png) !important;
      background:none;
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="inflatable.png");  
      }
    so that no htc is required.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    colindunn (10-22-2007)

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Interesting idea. Couple of questions, first off, is "filter" valid? Also,is there any way to apply this to div background images? Thanks for your help.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Valid? an interesting question. The basic question is whether IE is valid or not. Until IE learn how to display PNG without the usual "dish-water color " (from sitepoint.com) background, I say these all are valid.
    CSS validator may look at me harshly, but I'll use it since google use it in orkut and gtalk and it doesn't require any javascript hack.

    PS:in site review forum, I've added a site www.nrityalaya.net which uses a lot of PNG s.
    PPS: Its not as easy as that of using img or normal background, when talking about cross browser compatibility.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    colindunn (10-22-2007)

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts

    No more javascript for png hack!

    In fact you are applying the same invalid properties through javascript. And you can make the above trick much more simpler like

    Code:
    <head>
    <!--[if IE]>
    <style type="text/css">
    #test{
    	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png");
    }	
    </style>
    <![endif]-->
    </head>
    
    <body>
    
    <!--[if IE]>
    	<img id="test" src="#" width="1" height="1">
    <![endif]-->
    
    <!--[if !IE]><!-->
    	<img id="test" src="image.png" width="360" height="116">
    <!--<![endif]-->
    
    </body>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    colindunn (10-22-2007)

  • #6
    New Coder
    Join Date
    Apr 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Well that may work for images but what about div backgrounds? The most important part of this is that I need something to work just as effectively on images on the page as on the background images. If I am loading the javascript to fix the background image problem I may as well apply it to the rest of the images.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Well, the first post was for background images and the last one for simply img.

    The advantage of this method is, it'll work even if someone disable JS in their browser (but it's very hard in IE to do/not-to-do this ) and it is instantaneous unlike JS as they take some time to get executed after loading the page.

    The decision is left to us. If there are a lot of PNGs, then JS method is friendly. But if there are only a few images (which are the important images that give the major look and feel), then it is worth.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    colindunn (10-24-2007)

  • #8
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    I use a transparent PNG in my website and I just used this code in the html file header -

    <!--[if gte ie 5.5000]>
    <link rel="stylesheet" type="text/css" href="pages/ie55.css"/>
    <![endif]-->

    And then used this code in a external CSS file (seperate from my main css file with the png image which I need to be transparent) called ie55.css -

    ul#leftmenu {
    filter : progid : DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bannerimage_pinkred300.png' , sizingMethod='crop';
    background:none;
    }


    For my needs I had a UL which needed a transparent png. But you can use the code with Divs too.

  • Users who have thanked moss2076 for this post:

    colindunn (10-24-2007)

  • #9
    New Coder
    Join Date
    Apr 2007
    Posts
    49
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by moss2076 View Post
    ul#leftmenu {
    filter : progid :
    DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bannerimage_pinkred300.png' , sizingMethod='crop';
    background:none;
    }

    How does this code work? And what exactly does sizingMethod='crop' do?

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    If you are interested,
    http://msdn2.microsoft.com/en-us/library/ms532920.aspx
    (I hate Internet Exploder )
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    colindunn (10-25-2007)


  •  

    Posting Permissions

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