always wondered why internet explorer does this...

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
User avatar
paqman
Forum Contributor
Posts: 125
Joined: Sun Nov 14, 2004 7:41 pm
Location: Burnaby, BC, Canada

always wondered why internet explorer does this...

Post 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
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post 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.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

As I understand it, Internet Explorer cannot render transparency in png images correctly... unless they fixed it.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Re: always wondered why internet explorer does this...

Post 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.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post 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.
RobertPaul
Forum Contributor
Posts: 122
Joined: Sun Sep 18, 2005 8:54 pm
Location: OCNY

Post by RobertPaul »

It may be a transparency issue, but it sounds like a gamma "correction" issue to me...
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Or use conditional comments to serve IE a gif while serving modern browsers the png.
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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. :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

didn't know that. Thanks for pointing that out.
darryladie
Forum Commoner
Posts: 62
Joined: Thu Mar 02, 2006 6:14 pm
Location: East Sussex, UK

Javascript PNG Fix for IE

Post 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
Post Reply