Apple IE PNG Fix [Archive]

monke

Nov 5, 2006, 01:44 AM

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:
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, 03:12 AM

This is a public script.

You can download it here:

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

Never used it though... :P I force my customers to use Firefox lol.

monke

Nov 5, 2006, 12:48 PM

Thanks nightelf!

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

monke

Nov 5, 2006, 06:39 PM

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? :o

Benjamin

Nov 5, 2006, 07:20 PM

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, 07:23 PM

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. :confused:

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

ThunderLounge

Nov 5, 2006, 10:22 PM

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, 10:52 PM

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, 11:17 PM

You can also use this javascript code. Refer to the website for more information.

/*

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:


*/

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, 11:22 PM

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 6, 2006, 12:01 AM

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. :o

nightelf

Nov 6, 2006, 12:42 AM

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

monke

Nov 6, 2006, 12:56 AM

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 6, 2006, 02:15 AM

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, 04:48 AM

I've used this modification of allinthehead.com's hack (http://allinthehead.com/retro/69/) of youngpup's Sleight script to accommodate background PNG transparency. x.gif is a 1x1 100% transparent gif.

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, 04:28 PM

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.

I've used this modification of allinthehead.com's hack (http://allinthehead.com/retro/69/) 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, 05:51 PM

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)

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, 10:09 PM

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

Lixivial

Nov 20, 2006, 04:28 AM

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

<head>


<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, 10:41 PM

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. :)

pengu

Nov 20, 2006, 10:56 PM

As a professional web developer, i suggest using /IE7/ (http://dean.edwards.name/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, 11:34 PM

pengu

Nov 21, 2006, 12:02 AM

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:

monke

Nov 21, 2006, 12:09 AM

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, 10:09 PM

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:

pengu

Nov 22, 2006, 10:24 PM

yes, it works for IE 5, 5.5 and 6.

im not sure why it isnt working for you. have you read the README file, or the documentation on the author's website?

monke

Nov 22, 2006, 11:28 PM

I went and redownloaded the file and got the README text. BTW, I did this before my last post.

I added the ENTIRE IE7 folder to the folder containing the HTML page.
Re-named all the .png's so that they end in -trans.png .

Snippet of the coding:
<link rel="stylesheet" type="text/css" href="files/style.css" />

</head>

This script works with an external style sheet right?

pengu

Nov 22, 2006, 11:35 PM

yes, it only works with stylesheets, it ignores in-line styles.

i assume you have checked the directory name etc. is the /IE7/ library in a directory called "ie" in the webroot?

have you got javascript turned on in MSIE?

i cant think of anything else that could be doing it, but without seeing the actual page, it could be anything.

monke

Nov 23, 2006, 12:06 AM

Yes, the /IE7/ library is in a directory called ie.

I have Internet Explorer version 6.0.2.nobodycaresanymore

Thats about it, I cannot figure it out at all.

Thanks for the help though. :)

monke

Nov 26, 2006, 12:15 AM

Nothing has worked at so far for solving the ie png issues, for me at least.

I now need to find out how to do something else.

Since it seems IE 6 doesn't want to support '-' margin values. I want to have my banner at the top of the site, directly underneath the IE bookmark/adress bars, but there is a space in between. Any way to solve this?

Thanks for the help! :)

pengu

Nov 26, 2006, 01:51 AM

by default the <BODY> object has a margin/padding in MSIE. set them both to 0 for the top.

also, i really suggest you keep trying with the /IE7/ library. try a simple HTML page with it included, and see if it works then.