Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
PNG images look awful in IE 7 but look fine on all Mac Browsers
- Thread starter MacDonaldsd
- Start date
- Sort by reaction score
I thought IE 7 handled .pngs better...
Try a different format first. Otherwise do you have a link? Or is it local?
Try a different format first. Otherwise do you have a link? Or is it local?
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.
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.
^^ What about a good old .gif?
Otherwise you could use a good old Javascript with an image with the "correct background"
Otherwise you could use a good old Javascript with an image with the "correct background"
Code:
<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>
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:
If that doesn't work in IE, then try
3. Attributes should always be quoted.
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:
Code:
document.getElementById('myimage').setAttribute("src","/path/to/image.jpg");
Code:
document.getElementById('myimage').src = "/path/to/image.jpg";
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.
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).
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).
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.
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.
Attachments
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.
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.)
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.)