Apple IE PNG Fix

monke · Nov 4, 2006

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.

nightelf · Nov 5, 2006

This is a public script.

You can download it here:

http://www.twinhelix.com/css/iepngfix/.

Never used it though...

I force my customers to use Firefox lol.

monke · Nov 5, 2006

Thanks nightelf!

If it were up to me everyone would HAVE to use Firefox, or just something different than IE.

monke · Nov 5, 2006

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?

Benjamin · Nov 5, 2006

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.

monke · Nov 5, 2006

Benjamin said:
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.

It is defined as #whatever, but my logo is also defined as #logo and it works.

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

ThunderLounge · Nov 5, 2006

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.

monke · Nov 5, 2006

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?

spicyapple · Nov 5, 2006

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
      }
   }
}

monke · Nov 5, 2006

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.

monke · Nov 5, 2006

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.

nightelf · Nov 5, 2006

Why do you need a transparent png background? Could you make it work with a transparent gif, or a normal one?

monke · Nov 5, 2006

nightelf said:
Why do you need a transparent png background? Could you make it work with a transparent gif, or a normal one?

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?

nightelf · Nov 5, 2006

monke said:
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?

What is the background? a pattern? a gradient? a picture?

I mean a flat, non-transparent picture.

Lixivial · Nov 6, 2006

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.

monke · Nov 11, 2006

nightelf said:
What is the background? a pattern? a gradient? a picture?

I mean a flat, non-transparent picture.

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.

Lixivial said:
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.

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.

Thanks Lixivial, I'll try it and see if it works.

Lixivial · Nov 11, 2006

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!

monke · Nov 19, 2006

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

Lixivial · Nov 20, 2006

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.

monke · Nov 20, 2006

That worked amazingly Lixivial! Thanks.

Now I need to figure out three more IE problems/issues.

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.

pengu · Nov 20, 2006

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.

monke · Nov 20, 2006

pengu said:
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.

Whoa, information overload! Hang on tight Batman!

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

One simple question though, how do I get it to work?

pengu · Nov 20, 2006

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]-->

monke · Nov 20, 2006

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.

monke · Nov 22, 2006

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.

Apple IE PNG Fix

macrumors 65816

macrumors 6502

macrumors 65816

macrumors 65816

Attachments

macrumors 6502a

macrumors 65816

macrumors 6502

macrumors 65816

macrumors 68000

macrumors 65816

macrumors 65816

macrumors 6502

macrumors 65816

macrumors 6502

macrumors 6502a

macrumors 65816

macrumors 6502a

macrumors 65816

macrumors 6502a

macrumors 65816

macrumors 6502a

macrumors 65816

macrumors 6502a

macrumors 65816

macrumors 65816

Our Staff