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 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    PNG displayed in IE

    I am looking for a good way to get PNG images to display in earlier versions of IE.

    Can anyone recommend a solid way of doing this?

    I want to avoid the horrid grey backrounds that show in IE.

    Thanks,
    Josh

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    I think PNG-8's work on IE6, however PNG24 (that allow alpha transparency) do not. There are scripts out there which allow PNG24's to work on IE6.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    New Coder
    Join Date
    Dec 2007
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes. I was wondering if anyone knew where to find a reliable script. I have tried 2 now and both were intermitent.

    One would occasionally shrink the art so it was un-viewable.

    The second made it so the page would never stop loading.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    I've had good luck with the bit of js below... but only when the .png is presented in the markup. If you use CSS to put the .png as a background image the transparency fails.

    js (goes inside <head></head> tags):
    Code:
    <!--[if lt IE 7]>
    <script language="JavaScript">
    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
    {
       var arVersion = navigator.appVersion.split("MSIE")
       var version = parseFloat(arVersion[1])
       if ((version >= 5.5) && (document.body.filters)) 
       {
          for(var i=0; i<document.images.length; i++)
          {
             var img = document.images[i]
             var imgName = img.src.toUpperCase()
             if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
             {
                var imgID = (img.id) ? "id='" + img.id + "' " : ""
                var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                var imgStyle = "display:inline-block;" + img.style.cssText 
                if (img.align == "left") imgStyle = "float:left;" + imgStyle
                if (img.align == "right") imgStyle = "float:right;" + imgStyle
                if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
                var strNewHTML = "<span " + imgID + imgClass + imgTitle
                + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
                img.outerHTML = strNewHTML
                i = i-1
             }
          }
       }    
    }
    window.attachEvent("onload", correctPNG);
    </script>
    <![endif]-->
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Dec 2007
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    I've had good luck with the bit of js below... but only when the .png is presented in the markup. If you use CSS to put the .png as a background image the transparency fails.

    js (goes inside <head></head> tags):
    Code:
    <!--[if lt IE 7]>
    <script language="JavaScript">
    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
    {
       var arVersion = navigator.appVersion.split("MSIE")
       var version = parseFloat(arVersion[1])
       if ((version >= 5.5) && (document.body.filters)) 
       {
          for(var i=0; i<document.images.length; i++)
          {
             var img = document.images[i]
             var imgName = img.src.toUpperCase()
             if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
             {
                var imgID = (img.id) ? "id='" + img.id + "' " : ""
                var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                var imgStyle = "display:inline-block;" + img.style.cssText 
                if (img.align == "left") imgStyle = "float:left;" + imgStyle
                if (img.align == "right") imgStyle = "float:right;" + imgStyle
                if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
                var strNewHTML = "<span " + imgID + imgClass + imgTitle
                + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
                img.outerHTML = strNewHTML
                i = i-1
             }
          }
       }    
    }
    window.attachEvent("onload", correctPNG);
    </script>
    <![endif]-->

    Very nice! Loads fast, no issues with image size, and I put it in a simple JS file so I can just refer it to keep page size small.

    Thanks for the great addon Excavator!

    Josh

  • #6
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    If you wanna show png in IE 5.5 use the following html in your <head> part of the page -

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

    Then you make a css file called ie55.css and put the following code for the element you want to show the png file, in this example it is for a unordered list called "leftmenu" -

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


  •  

    Posting Permissions

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