PNG's and IE 5.5+ ("fixes" don't seem to work?!)

  • champi0n
  • Graduate
  • Graduate
  • User avatar
  • Posts: 199

Post 3+ Months Ago

For example the following code/site doesn't seem to fix the PNG issue with IE 5.5,6 even though it says it does.

http://homepage.ntlworld.com/bobosola/pngtestfixed.htm

I am using IEs4Linux which i'm not sure if that'll pose a problem with the png fix or not. As when i go to the address with ie version 5.5 or 6, the png problem still exists.

I have a great site using 4 layers of png's to show a pretty cool header, and it looks and works in both FF and IE7. I developed for FF and when i checked in IE7 there were just a few padding issues and nothing else... to my great surprise. (Also the same goes for ie 5.5/6 with some padding issues, but more of a major problem is the PNG's)

So if that above address works in anyones 5.5/6 browser on a windows machine, then i guess the problem lies with linux running ie.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Quote:
I am using IEs4Linux


It's likely an issue where whatever you're using doesn't support all aspects of Internet Explorer.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

Java fix

Code: [ Select ]
// Java Document

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);
  1. // Java Document
  2. function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
  3. {
  4.   var arVersion = navigator.appVersion.split("MSIE")
  5.   var version = parseFloat(arVersion[1])
  6.   if ((version >= 5.5) && (document.body.filters))
  7.   {
  8.    for(var i=0; i<document.images.length; i++)
  9.    {
  10.      var img = document.images[i]
  11.      var imgName = img.src.toUpperCase()
  12.      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
  13.      {
  14.       var imgID = (img.id) ? "id='" + img.id + "' " : ""
  15.       var imgClass = (img.className) ? "class='" + img.className + "' " : ""
  16.       var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
  17.       var imgStyle = "display:inline-block;" + img.style.cssText
  18.       if (img.align == "left") imgStyle = "float:left;" + imgStyle
  19.       if (img.align == "right") imgStyle = "float:right;" + imgStyle
  20.       if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
  21.       var strNewHTML = "<span " + imgID + imgClass + imgTitle
  22.       + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
  23.       + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
  24.       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
  25.       img.outerHTML = strNewHTML
  26.       i = i-1
  27.      }
  28.    }
  29.   } 
  30. }
  31. window.attachEvent("onload", correctPNG);


HTML...

Code: [ Select ]
<html>

<head></head>

<body bgColor="red">

<!-- This DIV is the target container for the image. -->

<DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;

   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(

   src='http://www.imagehosting.com/out.php/i937855_transparent.png', sizingMethod='scale');" >

</DIV>

</body>

</html>
  1. <html>
  2. <head></head>
  3. <body bgColor="red">
  4. <!-- This DIV is the target container for the image. -->
  5. <DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
  6.    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
  7.    src='http://www.imagehosting.com/out.php/i937855_transparent.png', sizingMethod='scale');" >
  8. </DIV>
  9. </body>
  10. </html>
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

joebert wrote:
Quote:
I am using IEs4Linux


It's likely an issue where whatever you're using doesn't support all aspects of Internet Explorer.


IE doesn't support transparencies altogether
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Bogey what you posted is basicly doing the exact same thing as the article champi0n posted. ;)

IEs4Linux is an Internet Explorer emulator for Linux, likely one that doesn't support the active-x image filter that Javascript implements.

Code: [ Select ]
progid:DXImageTransform.Microsoft.AlphaImageLoader


This is unlikely to return a valid object in Linux because the Windows Registry entry that maps that object to a valid application extension probably isn't there.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8416
  • Loc: USA

Post 3+ Months Ago

Oh okay. Sorry about that.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

No need to be sorry, you were just ill-informed. :D
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Twin Helix has the best (and easiest) fix for this that I've seen- I use it on everything.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

I'll be amazed if that one works either, once again it's using the same method as suggested by Bogey & the original poster.
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

As Joebert stated, this is a problem with IEs4Linux.

The problem seems to be that the DLL that handles PNG rendering somehow gets unregistered.
There is a fix listed here: http://blog.chaosmeme.com/articles/2007 ... es-4-linux
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Nice find spock.

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 16 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.