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 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Older versions of IE support pngs?

    I have IE 6 but use Firefox. I always code for Firefox and later test it on IE later. I love pngs because it keeps the original image quality you were going for (jpgs= yuck!). I usually have several pngs with transparent backgrounds or opacities, which is another reason there so great (they support opacity). On other computers I try with IE 7 it always works fine, but whenever I try it with my IE 6 it have a white background where it's supposed to be transparent. Does IE 6 not support pngs? Do people really still use IE 6?

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Sadly, some people still use IE6. IE6 does not support .png transparency among other things.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    dang, well thanks for letting me know. Do you think I should worry about IE 6 though? Or just ignore it and expect them to get IE 7 or Firefox.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I think it really depends on your target audience though thats a drastic measure seeing as how everyone can't get IE7. People on Windows 2000 can't get IE7 at least not through an update. People on Windows SP1 also can't get IE7 until they get SP2.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    May 2005
    Location
    Alabama
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope, no PNG transparecy support. I know it, pitiful.

  • #6
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can fake it with javascript, like so: (put his somewhere between your head tags)

    Code:
    <!--[if lte IE 6]>
    // Universal transparent-PNG enabler for MSIE/Win 5.5+
    // http://dsandler.org
    // From original code: http://www.youngpup.net/?request=/snippets/sleight.xml
    // and background-image code: http://www.allinthehead.com/retro/69
    // also:
    //  * use sizingMethod=crop to avoid scaling PNGs (who would do such a thing?)
    //  * only do this once, to make it compatible with CSS rollovers
    
    if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
    	window.attachEvent("onload", enableAlphaImages);
    }
    
    function enableAlphaImages(){
    	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
    	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
    	if (itsAllGood) {
    		for (var i=0; i<document.all.length; i++){
    			var obj = document.all[i];
    			var bg = obj.currentStyle.backgroundImage;
    			var img = document.images[i];
    			if (bg && bg.match(/\.png/i) != null) {
    				var img = bg.substring(5,bg.length-2);
    				var offset = obj.style["background-position"];
    				obj.style.filter =
    				"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
    				obj.style.backgroundImage = "url('/images/spacer.gif')";
    				obj.style["background-position"] = offset; // reapply
    			} else if (img && img.src.match(/\.png$/i) != null) {
    				var src = img.src;
    				img.style.width = img.width + "px";
    				img.style.height = img.height + "px";
    				img.style.filter =
    				"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')"
    				img.src = "/images/spacer.gif";
    			}
    
    		}
    	}
    }
    <![endif]-->
    Works quite well, though on large graphics, and a slow connection, it can look a bit wierd as it renders.

    Folks with Js turned off will just see the usual non-transparent PNG that IE6 renders - though to me that's not a major problem, as most IE users that are sussed enough to switch JS off are sussed enough to expect a few visual oddities on the sites they visit.

    Gary

  • #7
    New Coder
    Join Date
    Jun 2007
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    I think it really depends on your target audience though thats a drastic measure seeing as how everyone can't get IE7. People on Windows 2000 can't get IE7 at least not through an update. People on Windows SP1 also can't get IE7 until they get SP2.
    Yes, I have windows 2000. I guess I'll just have to do it the old fashioned way until IE 6 is no longer widely used.

  • #8
    New Coder
    Join Date
    Jun 2007
    Posts
    60
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by groog View Post
    Yes, I have windows 2000. I guess I'll just have to do it the old fashioned way until IE 6 is no longer widely used.
    or do it the fun way and keep png's and force the user to get IE7/Firefox =P Eventually they will have to give in hehe.

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by Graft-Creative View Post
    Works quite well, though on large graphics, and a slow connection, it can look a bit wierd as it renders.
    You forgot script tags btw.

    To get around the images loading after the page loads you can use the defer attribute. Using defer the page will load with the graphics already transparent and you also don't need the load event.
    Code:
    <!--[if lte IE 6]>
    <script defer type="text/javascript">
    	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
    	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
    	if (itsAllGood) {
    		for (var i=0; i<document.all.length; i++){
    			var obj = document.all[i];
    			var bg = obj.currentStyle.backgroundImage;
    			var img = document.images[i];
    			if (bg && bg.match(/\.png/i) != null) {
    				var img = bg.substring(5,bg.length-2);
    				var offset = obj.style["background-position"];
    				obj.style.filter =
    				"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
    				obj.style.backgroundImage = "url('/images/spacer.gif')";
    				obj.style["background-position"] = offset; // reapply
    			} else if (img && img.src.match(/\.png$/i) != null) {
    				var src = img.src;
    				img.style.width = img.width + "px";
    				img.style.height = img.height + "px";
    				img.style.filter =
    				"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')"
    				img.src = "/images/spacer.gif";
    			}
    
    		}
    	}
    </script>
    <![endif]-->
    Personally though I prefer this script as it doesn't require transparent gifs.
    Code:
    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
          }
       }
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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