HTML Forum

**Brian07002** · 07-28-2008, 07:54 PM

Anyone have a permanent solution for IE < 7

(I am using IE 6 to test my pages) but looking for a transparency fix for any version of Internet Explorer that needs it...GOD I hate IE, but I don't know who else is using it, so I guess I will have to suffer w/ a fix for now. But why

Thanks!
-Brian

**seocd** · 07-28-2008, 08:43 PM

look into the supersleight javascript. That is what we use on our website and it works for all versions of IE. It takes a bit of playing around with but it works.

**LadynRed** · 07-28-2008, 08:43 PM

Do a search for IE PNG fix, there are a couple of solutions - but they don't work for repeating transparent PNGs.

However, this is a new one: http://labs.unitinteractive.com/unitpngfix.php - supposed to work on repeating pngs.

**Brian07002** · 07-28-2008, 09:45 PM

Thank you both LadynRed and seocd for the replies, I will give it a try

-Brian

**Brian07002** · 07-28-2008, 09:54 PM

I just tried it, and it doesn't work.

the page loads and quickly dissapears. I noted just before the page went blank, the png was not transparent (white edges)...I tried removing the clear.gif image, and I got a box w/ the red x in replace of my png image.

Any other ideas? Or should I just recommend Firefox as the browser of choice?
-Brian

**firebladeiii** · 07-29-2008, 09:19 AM

use the following code

HTML Code:

<span style="width:71px;height:25px; cursor:hand;display:inline-block;

/* the height and width should match those of the image */

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourimage.png');    ">
<img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" 
src="yourimage.png" width="71" height="25" border="0" alt="">
</span>

**LadynRed** · 07-29-2008, 10:41 AM

And, of course, that filter is EXACTLY what the javascript methods use!
Putting it inline with a span is pretty sloppy.

Brian, lets see the code involved, I have never had a bit of trouble with any of the PNG fix scripts.

**webcosmo** · 07-29-2008, 03:55 PM

Look art this
http://homepage.ntlworld.com/bobosola/index.htm

**Brian07002** · 07-29-2008, 08:19 PM

Thanks for the replies, but I decided I am going to just stick to Firefox as the browser of choice for now, unless I get a higher percent of Microsoft IE users hitting my page. I am logging the users browser and resolution so that will tell all.

Thanks for the help otherwise!

**seo-neon** · 08-13-2008, 05:43 AM

you can also use .gif if you want some tranparency, but .png? i think there will always be a problem in transparency when in IE... haha, i hate IE too but i got to be used to it...

**wayfarer07** · 08-13-2008, 10:57 AM

Quote:

Thanks for the replies, but I decided I am going to just stick to Firefox as the browser of choice for now, unless I get a higher percent of Microsoft IE users hitting my page.

I love Firefox as much as most of the people here, but the vast majority of people use a version of Explorer as their primary browser. It is wise to optimize for it.

PNG fixes aren't always perfect, however, so sometimes I send Jpegs and a slightly different layout to IE6.

**lht0747** · 08-13-2008, 11:23 PM

you can use a javascript code in <head></head>

Code:

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
function fixPNG(myImage) 
{
    if ((version >= 5.5) && (version < 7) && (document.body.filters)) 
    {
       var imgID = (myImage.id) ? "id='" + myImage.id + "' " : ""
    var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : ""
    var imgTitle = (myImage.title) ? 
               "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' "
    var imgStyle = "display:inline-block;" + myImage.style.cssText
    var strNewHTML = "<span " + imgID + imgClass + imgTitle
                  + " style=\"" + "width:" + myImage.width 
                  + "px; height:" + myImage.height 
                  + "px;" + imgStyle + ";"
                  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                  + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
    myImage.outerHTML = strNewHTML   
    }
}


function correctPNG()
   {
   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
        }
      }
   }
function alphaBackgrounds(){
   var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, '');
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
   for (i=0; i<document.all.length; i++){
      var bg = document.all[i].currentStyle.backgroundImage;
      if (bg){
         if (bg.match(/.png/i) != null){
            var mypng = bg.substring(5,bg.length-2);
   //alert(mypng);
            document.all[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
            document.all[i].style.backgroundImage = "url('')";
   //alert(document.all[i].style.filter);
         }                                               
      }
   }
}

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", correctPNG);
window.attachEvent("onload", alphaBackgrounds);
}

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!