PDA

View Full Version : PNG images look awful in IE 7 but look fine on all Mac Browsers




MacDonaldsd
Apr 10, 2008, 06:27 AM
Hi,

Im having a problem whereby all of my PNG images look terrible in IE 7 ( I haven't got IE 6 to check).

I have posted an example below, any help and advice would be much appreciated.



Eraserhead
Apr 10, 2008, 06:35 AM
I thought IE 7 handled .pngs better...

Try a different format first. Otherwise do you have a link? Or is it local?

MacDonaldsd
Apr 10, 2008, 06:41 AM
Hi,

Its being tested locally at the moment, but I need the transparency so I can't use JPEGs.

It seems to look fine in all Mac browsers, but bad in all Windows based browsers.

Eraserhead
Apr 10, 2008, 07:01 AM
^^ What about a good old .gif?

Otherwise you could use a good old Javascript with an image with the "correct background"


<script type="text/javascript">
if(navigator.userAgent.indexOf("MSIE 7")!=-1 || navigator.userAgent.indexOf("MSIE 6")!=-1){
document.writeln('<img src=imagewithbackground.jpg></img>')
}else{
document.writeln('<img src=imagewithtransparency.png></img>')
}
</script>
<noscript>
<img src=imagewithtransparency.png></img>
</noscript>

angelwatt
Apr 10, 2008, 07:56 AM
I second trying gif. The images you posted are simple so gif should have good enough quality and handles transparency. Also, there's tons of articles written about hacks to get around IE's pitiful handling of pngs, just make a search.

stomer
Apr 10, 2008, 08:08 AM
Sorry for being a pedant, but I don't think that teaching bad habits is a good thing.

1. Browser detection is nasty, and should be avoided at all costs. A transparent GIF avoids this, so that should be the chosen solution if indeed IE still can't handle PNGs properly.
2. document.writeln() is nasty. Much better to use the DOM:
document.getElementById('myimage').setAttribute("src","/path/to/image.jpg");
If that doesn't work in IE, then try

document.getElementById('myimage').src = "/path/to/image.jpg";

3. Attributes should always be quoted.

kkat69
Apr 10, 2008, 09:30 AM
It seems to look fine in all Mac browsers, but bad in all Windows based browsers.

This statement is so false (xxxxxxxxxxxxxxxxxx) since Safari, Firefox, Opera, et al are Windows Based browsers AND Mac Based browsers and often if not always handle PNG transparency better. They are sometimes preferred to be coded for than say IE. IE the only current Windows only, with the exception of previous versions that actually RAN on Macs typically has bad history with PNG transparencies. There is code to utilize the IE DOM to render PNG transparency properly but I'm not going to get into it since it can be googled.

Transparent GIFs if possible, should be used that way they are more consistant with any browser until IE/MS get off their butts and decide to manage their DOM better so it's more in line with other browsers rendering engines. Often though PNG's are preferred since they handle the transparency better IMO.

Google on PNG and IE and you'll find CSS tricks to render the PNG properly. Also how the PNG is saved helps, 8,24,32bit plus Matte value help. You'll end up utilizing some of IE's built in filters more than likely.

I've done websites with transparent PNG's and it's worked in IE (except 5 and below) just fine but requires some careful planning with both stylesheet and saved format.

Makosuke
Apr 10, 2008, 12:19 PM
I'm rather curious what you're using to produce the funky PNGs, since I've had no trouble getting IE7 to work with PNGs with either simple transparency or a full alpha channel without any hacks whatsoever. Both produced by Photoshop in my case, though.

Also, are you setting height and width on the image? If so, is it possible you've set it to something other than the image's actual dimensions and IE is screwing up the scaling?

IE6 is a different story entirely--it definitely won't handle an alpha channel without a hack along the lines of the one mentioned (though I like the pre-built supersleight script myself--it's been mentioned before on this forum).

MacDonaldsd
Apr 10, 2008, 03:09 PM
Hi thanks for every ones input.

Changing it to gif doesn't seem to solve the problem ether.

I explicitly put the image width, height and border in the html so it isn't a scaling issue.

If it matters I used illustrator CS3 and used the save for web and devices option.

kkat69
Apr 10, 2008, 03:31 PM
Hi thanks for every ones input.

Changing it to gif doesn't seem to solve the problem ether.

I explicitly put the image width, height and border in the html so it isn't a scaling issue.

If it matters I used illustrator CS3 and used the save for web and devices option.

It could be a combo of both the method of exporting and how the image is added (ie., code)

Example below was done about 2mins ago using Fireworks MX (yes it's old but for what I do in the office it's perfect) and I added the image, just dropped it onto an HTML page and rendered it. As you can see in IE 7 the transparency renders fine. The image was exported as a 32bit PNG with the Matte set to white. It's hard to see but it did render proplerly.

ezekielrage_99
Apr 10, 2008, 07:29 PM
Use a GIF, transparent PNG are crappy in IE any version

Makosuke
Apr 11, 2008, 05:30 PM
Changing it to gif doesn't seem to solve the problem ether.

I explicitly put the image width, height and border in the html so it isn't a scaling issue.Are you SURE you're setting the correct height and width? That's the only reason I can think of that a GIF would do the same thing, other than some weird script error. Try without just to confirm what happens.

Also, if you're not able to post the actual page you're working on, could you at least post the actual PNG and GIF you're having trouble with? I, at least, would be interested in looking at it.

MacDonaldsd
Apr 12, 2008, 05:47 AM
Yeah sure:

I attached the original PNG, and the GIF which have made less busy to see if that helped.

Makosuke
Apr 12, 2008, 03:13 PM
Ok, assuming that those are the exact images you're using, unless the image is huge on the page, I was correct--it's because you're resizing them by setting an explicit height and width smaller than the actual image. The PNG is 137x74, so unless you're using width="137" height="74", you're resizing them, causing the distortion you're seeing.

IE7 handles PNG alpha channels well enough (IE6 won't without the previously mentioned hacks), but it does an awful job of downscaling images on the fly, which is what you're seeing.

Make a PNG or GIF that is the actual pixel dimensions you want your final image to be on the page, and use that--it'll work.

(Also, even if downscaling worked properly, you've still got weird sizes--that PNG is 137x74 pixels, and since 137 is a prime, you're going to be changing the aspect ratio no matter what values you use.)