Transparency

So, this: http://databank.allroundnews.co.uk/image.html] (I made a mock page with back ground colour) is my PNG logo, the transparency works fine in FireFox, but in Internet Exporer its just white.

I figure IE, since it's crap, doesn't support PNGs properly, so I converted it to GIF which just messed up the quality.

Anyone have any ideas on how to have transparency and no loss of quality?

 

I have the same problem to, IE sucks, I just make the background of the logo match to the background color, that is the only way, otherwise if someone else found a new way, please reply.

 

I found out; I should have let you guys know >.<

Ta-dah.

 

Let me know how you do it

 

Add this to your page:

<style type="text/css">
IE7 {css2: auto}
</style>
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="png.js"></script>
<![endif]-->

HTML:

This is the png.js script:

function PNG_loader() {
  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;";
      if (img.align == "right") imgStyle += "float:right;";
      if (img.parentElement.href) imgStyle += "cursor:hand;";
      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--;
    }
  }
}
window.attachEvent("onload", PNG_loader);

Code (markup):

That's the way I had to do it in the site in my sig because the images were half a square and the other half was showing a white background instead of being transparent.

 

Neat trick with the JS

In my experience, it's only alpha transparency and pngs that IE has a problem with?

If you save your pngs as 8bit with transparency, they'll work just fine.

Another option is you can serve a different or no image to IE instead using conditional comments - like Im doing at JFS Homeloans - look at an inside page using Firefox then IE and you'll see the background is dropped for IE. If you look at the source of the page, you'll see the conditional comments in the head section.

 

Did you save the PNG as an 8bit? Guess you did - save it as a 24bit and it shoudl work just fine (albeit a bigger file size)

CW