Apple IE PNG Fix

Discussion in 'Web Design and Development' started by monke, Nov 4, 2006.

  1. monke macrumors 65816

    monke

    Joined:
    May 30, 2005
    #1
    How does Apple step around the transparent PNG's in IE? Go to http://www.apple.com/ipodnano/ and take a look at the falling Nano's picture. In IE right-click and properties tell you this:
    Code:
    http://images.apple.com/main/js/iepngfix/blank.gif?repurl=http://images.apple.com/ipodnano/images/indexfallingnanos20060912.png
    Instead of linking the PNG directly they link a blank gif. How would I go about doing this?

    Thanks. :)
     
  2. nightelf macrumors 6502

    Joined:
    Mar 25, 2003
    #2
  3. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #3
    Thanks nightelf!

    If it were up to me everyone would HAVE to use Firefox, or just something different than IE. :D
     
  4. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #4
    Well unfortunately I have run into another problem.

    In certain parts of my site, I have 25% white transparent PNG's which all show up fine in Firefox (see image below), but once again in IE the PNG's will not show up properly. Help? :eek:
     

    Attached Files:

  5. Benjamin macrumors 6502a

    Benjamin

    Joined:
    Oct 27, 2003
    Location:
    Portland, OR
    #5
    is your image defined in the CSS style sheet or is it part of the markup? the PNG fix only works with things that are in the markup with the <img> tag i believe.
     
  6. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #6
    It is defined as #whatever, but my logo is also defined as #logo and it works. :confused:

    EDIT: I found out the problem. The images will not repeat in IE, any idea how to solve this?
     
  7. ThunderLounge macrumors 6502

    ThunderLounge

    Joined:
    Sep 20, 2006
    #7
    I use javascript, and include the file in a conditional comment.
    That's just me though.

    It does work though, and works well. It would be a different case if there was a significant number of people with JS turned off. However, in the cases where I have it implemented, it's less than half a percent.
     
  8. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #8
    I know javascript can accomplish the exact same thing but I like how neat and tidy the coding is. ;)

    Could you possibly post a link to your mode of fixing this ThunderLounge?
     
  9. spicyapple macrumors 68000

    spicyapple

    Joined:
    Jul 20, 2006
    #9
    You can also use this javascript code. Refer to the website for more information.

    Code:
    /*
     
    Correctly handle PNG transparency in Win IE 5.5 & 6.
    http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
    
    Use in <HEAD> with DEFER keyword wrapped in conditional comments:
    <!--[if lt IE 7]>
    <script defer type="text/javascript" src="pngfix.js"></script>
    <![endif]-->
    
    */
    
    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
          }
       }
    }
    
     
  10. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #10
    Thanks spicyapple, that's was exactly what I was looking for. :)

    EDIT: Nevermind. Just before I posted it worked, now nothing.

    EDIT 2: Nevermind the above edit, neither will work with a CSS background-image.
     
  11. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #11
    Now that I've figured out that it is not possible to have a transparent PNG show up properly, with repetition, what should I do?

    Option #1:
    Redirect the IE users to a different page where the images are different.

    Option #2:
    Add a 'Too Cool for IE' type thing onto the site.

    Option #3:
    Let the IE users know that the site will not work properly using IE.

    Option #4:
    A combination of all of them. Let the user know that the site will not work right, add something in the corner to remind them, and add somekind of a JavaScript file (which I'm not any good at) that will swap the images for a different image.

    Other Suggestions are welcome. :eek:
     
  12. nightelf macrumors 6502

    Joined:
    Mar 25, 2003
    #12
    Why do you need a transparent png background? Could you make it work with a transparent gif, or a normal one?
     
  13. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #13
    A gif won't show up and I don't know why. Possibly because the white in the picture is only about 10% - 15%. What do you mean by a normal one?
     
  14. nightelf macrumors 6502

    Joined:
    Mar 25, 2003
    #14
    What is the background? a pattern? a gradient? a picture?

    I mean a flat, non-transparent picture.
     
  15. Lixivial macrumors 6502a

    Lixivial

    Joined:
    Jan 13, 2005
    Location:
    Between cats, dogs and wanderlust.
    #15
    I've used this modification of allinthehead.com's hack of youngpup's Sleight script to accommodate background PNG transparency. x.gif is a 1x1 100% transparent gif.

    Code:
    if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
    	window.attachEvent("onload", alphaBackgrounds);
    }
    
    function alphaBackgrounds(){
    	var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
    	var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
    	for (i=0; i<document.all.length; i++){
    		var bg = document.all[i].currentStyle.backgroundImage;
    		if (itsAllGood && bg){
    			if (bg.match(/\.png/i) != null){
    				var mypng = bg.substring(5,bg.length-2);
    				document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='crop')";
    				document.all[i].style.backgroundImage = "url('./includes/images/x.gif')";
    				document.all[i].style.backgroundPosition = 'bottom right';
    			}
    		}
    	}
    }
    The twin-helix script is supposed to allow for transparent PNG backgrounds, but I suppose it may not work for repeating backgrounds. This javascript may not either -- I've only attempted it on a static background. There are hundreds of these things floating around, but I think the twinhelix and the one spicyapple posted are the most common.
     
  16. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #16
    The background is a picture that I've repeated to get it to go across the entire page. It is semi-transparent, about 15% white.

    Thanks Lixivial, I'll try it and see if it works. :)
     
  17. Lixivial macrumors 6502a

    Lixivial

    Joined:
    Jan 13, 2005
    Location:
    Between cats, dogs and wanderlust.
    #17
    Hopefully it does what you're looking for it to do, though I make no promises. Be sure to change this line (specifically the ./includes/images/x.gif)

    Code:
    document.all[i].style.backgroundImage = "url('./includes/images/x.gif')";
    to match the path you created for your x.gif image. Again that's a 1x1px 100% transparent gif. Good luck! :)
     
  18. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #18
    Ran into problem. I'm sure its a 'quick and easy' solution:

    Where and how do I link to the Javascript file? In the CSS document or the main page? How do I like it?

    Thanks for all the help, if it weren't for IE I'd have been done last Christmas :p :D
     
  19. Lixivial macrumors 6502a

    Lixivial

    Joined:
    Jan 13, 2005
    Location:
    Between cats, dogs and wanderlust.
    #19
    Well, I had to retest this to make sure it actually worked with CSS-defined backgrounds, and, indeed, it does. I still have yet to even test the tiled backgrounds, which is what you're looking to do. Anyroad, the place to link the javascript would be in the main page that contains all the HTML. The likely candidate for placement is in the <head> tag, so it would look something like this. Of course, point the src= to the actual location of the file...

    Code:
    <head>
        <!-- any goodies here -->
        <!-- css declaration stuff here... -->
        <script type="text/javascript" src="./includes/js/pngfix.js"></script>
    </head>
    The one caveat to this -- where the javascript *may* not parse your CSS-defined pngs correctly -- is if you link the script before linking to your stylesheet. So be sure to put the script tag after your stylesheet declaration.
     
  20. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #20
    That worked amazingly Lixivial! Thanks. :)

    Now I need to figure out three more IE problems/issues. :mad:
    1) IE won't support a minus (-) margin, at least thats my guess. I need to find a way to get the banner div (see picture below) even with the IE bookmarks bar and remove all that space. It appears fine it Firefox, but again IE does not want to cooperate.
    2) If step #1 is possible, I will need/want another style sheet specifically for IE. That way it will still look the same in Firefox. How do I go about doing this?
    3) I would also like to have something like 'IE doesn't show the page correctly' at the top, or somewhere's else, just not as a popup.

    Thanks. :)
     
  21. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #21
    As a professional web developer, i suggest using /IE7/ (Not MSIE 7)

    /IE7/ is a javascript library written to "fix" the issues in MSIE <= v6

    using the same "conditional comments" as above, the library can be included into pages when the visitor is using MSIE <= v6, and it will not only resolve most PNG Alpha related issues, it also fixes most layout (box model) issues, etc.

    it allows you to write compliant XHTML & CSS, test in a compliant browser, and then be relatively secure in the knowledge it will look appear very close in MSIE.

    obviously i still suggest you test in any/all browser versions you can get your hands on.
     
  22. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #22
    Whoa, information overload! Hang on tight Batman! :p

    So I downloaded the file, via this link and got 21 files with it. :eek:

    One simple question though, how do I get it to work? :)
     
  23. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #23
    now i dont mean to seem rude, but the file: README.TXT, and the "usage" page at http://dean.edwards.name/IE7/usage/ BOTH state this quite clearly:
    Code:
    <!-- compliance patch for microsoft browsers -->
    <!--[if lt IE 7]>
    <script src="/ie7/ie7-standard-p.js" type="text/javascript">
    </script>
    <![endif]-->
    
     
  24. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #24
    When I downloaded the zip file, I never got a README.txt which I thought was kind of unusual, but whatever. That site is a pain to navigate and could not for the life of me find that page.

    Thanks again. :)
     
  25. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #25
    pengu nothing has worked at all so far. Is it supposed to work for ie 6? If not it will be completely uselss for me.

    Another thing, will it work without being uploaded onto a server? I have it all the files in the same folder on my computer.

    God I hate ie. :mad:
     

Share This Page