Forums

o-d

I tried some of the ways to solve it. but cannot find a proper fix for it. Which of the transparent png fix way do you prefer?

Digital Skraps

I quit using transparent png's all together except when i NEED them. just to much of a pain. none of the JS ever worked right for me and just wasn't worth the time. for experimenting it's awesome. if you could care less about the gray box they're awesome. for practical application i stick with what i know works.

.V1

I just build a IE6.css stylesheet where i put my alpha filters in. Unless im using background position, than ill just replace the PNG with a gif.

And i use PHP or javascript to automaticly scan the use to see with browser type they are using, and add the corresponding stylesheet to it, :)

Hawke

Yup, that's one way to do it, and that's probably the way I would use too.
2x more job, but meh, you get something that work on every major browser :)

welshstew

I just usually end up using a .gif, or if using a .png then will use a conditional css file for ie6 with alpha filters

Hawke

Yeah, .gif also work.
In fact I just realised that's the way I use the most :O

box

I tend to use a conditional-commented style sheet to address background pngs - but this link has a easy to use fix too. I've used this a few times.
Unfortunately - we'll have to keep coding for IE6 for a year or two more and if the fix for a design is easy enough to implement - then I believe we have a duty to do so. For the time being anyway.

bbodine1

This is the easiest and best fix I have ran across. It's a 2 step process. First add this js file to a place that's easily accessible to your pages, either the root or js/scripts folder.[attachment=0]pngfix.zip[/attachment]

Then add this code to the <head> section of your page.

<!--[if lt IE 7.]>
<script defer type=\"text/javascript\" src=\"pngfix.js\"></script>
<![endif]-->

Don't forget to change the src="pngfix.js" to the place you put the file.

Oscar

Hello!!

This one saved my life, just place it anywhere between the <head> </head> tags

<!--[if gte IE 5.5000]>
<script language=\"JavaScript\">
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
      }
   }
}
window.attachEvent(\"onload\", correctPNG);
</script>
<![endif]-->

.V1

U do know that your scripts applies to ALL ie's above 5,5... so also ie 7 and 8 which have no problems with PNG.

"Oscar" said:

Hello!!

This one saved my life, just place it anywhere between the <head> </head> tags

<!--[if gte IE 5.5000]>
<script language=\"JavaScript\">
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
      }
   }
}
window.attachEvent(\"onload\", correctPNG);
</script>
<![endif]-->

bbodine1

".V1" said:

U do know that your scripts applies to ALL ie's above 5,5... so also ie 7 and 8 which have no problems with PNG.

[quote="Oscar"]Hello!!

This one saved my life, just place it anywhere between the <head> </head> tags

<!--[if gte IE 5.5000]>
<script language=\"JavaScript\">
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
      }
   }
}
window.attachEvent(\"onload\", correctPNG);
</script>
<![endif]-->

[/quote]
Just change your <!--[if gte IE 5.5000]> to <!--[if lt IE 7.]> This script is the same as the file I posted previously. I just use an include instead of posting the entire script inside the head of each page.

treehouse : what would you like to learn today?

Forums

Related to transparent png problem on old ie browsers