Page 1 of 1
always wondered why internet explorer does this...
Posted: Wed Feb 15, 2006 1:21 am
by paqman
I've always noticed that internet explorer does not match the exact color in images on webpages (unless the color is black or white [maybe a few others, i haven't noticed yet]), which makes image links look really bad. Firefox has no problem with this, but IE sure does! Anyone know why it does this? Are there any work arounds for this problem? If you don't know what I'm talking about, go to
http://paqmanweb.com/ssl/ and look at the header image. Thanks
Posted: Wed Feb 15, 2006 1:40 am
by feyd
You're using a png. Native png support in IE is odd, at best. Convert them to JPEG or GIF and they'll work "correctly."
Moved to UI.
Posted: Wed Feb 15, 2006 3:12 am
by onion2k
feyd wrote:Convert them to JPEG or GIF and they'll work "correctly."
JPG will not necessarily give you an exact colour match.
Posted: Wed Feb 15, 2006 6:05 am
by Benjamin
As I understand it, Internet Explorer cannot render transparency in png images correctly... unless they fixed it.
Re: always wondered why internet explorer does this...
Posted: Wed Feb 15, 2006 6:22 am
by Roja
paqman wrote:I've always noticed that internet explorer does not match the exact color in images on webpages (unless the color is black or white [maybe a few others, i haven't noticed yet]), which makes image links look really bad. Firefox has no problem with this, but IE sure does! Anyone know why it does this? Are there any work arounds for this problem? If you don't know what I'm talking about, go to
http://paqmanweb.com/ssl/ and look at the header image. Thanks
The issue you describe (cant check to be sure since you switched to a jpg) is most likely the infamous IE png bug. It renders the transparency incorrectly.
There are at least three major workarounds, one js, one activex, and one in the way you save the png (black matte and 8-bit instead of 24-bit with no specified matte).
IE7 fixes the png bug.
Posted: Wed Feb 15, 2006 6:23 am
by onion2k
agtlewis wrote:As I understand it, Internet Explorer cannot render transparency in png images correctly... unless they fixed it.
There's a way to fix it using CSS and an HTC file .. I use the method on the header of phpgd.com.
Posted: Wed Feb 15, 2006 6:28 am
by RobertPaul
It may be a transparency issue, but it sounds like a
gamma "correction" issue to me...
Posted: Wed Feb 15, 2006 8:03 am
by Benjamin
RobertPaul wrote:It may be a transparency issue, but it sounds like a
gamma "correction" issue to me...
Which is unique to IE
Posted: Wed Feb 15, 2006 8:24 am
by matthijs
Or use conditional comments to serve IE a gif while serving modern browsers the png.
Posted: Wed Feb 15, 2006 8:49 am
by Roja
matthijs wrote:Or use conditional comments to serve IE a gif while serving modern browsers the png.
If you edit the png in a particular manner (see above) you can serve them to IE as well. All my images are png's and are served to all browsers.
Of course, I don't use transparency much.

Posted: Wed Feb 15, 2006 11:39 am
by matthijs
didn't know that. Thanks for pointing that out.
Javascript PNG Fix for IE
Posted: Thu Mar 02, 2006 6:40 pm
by darryladie
Javascript Fix for PNG Transparency in IE:
Code: Select all
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
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
}
}
}
}
window.attachEvent("onload", correctPNG);
Darryl