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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Question PNG transparency in IE6

    This is really important to me, ive been trying to get this working on my site for months, i really hope you guys can help me sort this out.

    Basically ive got a semi transparent page background image which is on top of a body background image. This works great in IE7 and Firefox but 40% still use IE 6 so i need a solution to get this working for them.

    Ive found this solution:

    http://blog.bjorkoy.com/2006/12/12/f...upport-in-ie6/

    First upload the iepngfix to your css folder (the following is inside that file)

    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 = 'blank.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>
    Second, paste this code into your CSS file:
    img { behavior: url(iepngfix.htc); }
    I adapted this for my site. For the advanced css definitions for the page background i put this code:

    Code:
    behavior: url(iepngfix.htc);
    although i did try this:

    Code:
    img { behavior: url(iepngfix.htc); }
    However, this doesnt work. I know that the code works when correctly implemented because its working on their site, when i do it doesnt display the semi transparency in the png overlay image at all, its as if the png wasnt there or is totally transparent not semi transparent.

    Can anyone help?

    James

  • #2
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    the paths to the files are relative to the page, not to the stylesheets

    I had the same problem too--

    basically i realized that the path you pass to behavior property is relative to the page, regardless of where you are declaring the behavior property (inline or in a stylesheet in some other directory)

    absolute paths to the files will also work. (e.g. url(/css/iepngfix.htc) etc)

    you also need to point iepngfix.htc to blank.gif using the same method. just edit iepngfix.htc file and where it asks for the path to blank.gif, use either a path relative to the page, or use an absolute path to blank.gif.


  •  

    Posting Permissions

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