Ok, So I'm coding a web page and I'm running into some problems. I have transparency in all my images so I had to save them as PNG so that the transparency is correct because GIF doesn't show it correct. So I saved all my images as PNG. As some of you might know the older versions of IE doesn't support transparency for PNG. So I was given a site that fixes this problem with JavaScript. So I add the code to my site and test it out and it only fixes the banner transparency and none of the other images. This is the site and code I used. http://homepage.ntlworld.com/bobosola/ and the code

<!--[if lt IE 7]>
<script language="JavaScript">
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);
</script>
<![endif]-->

Ok so thats one problem. Now the others, If you view my site in IE 5 or 6 you will see that only the banner gets fixed. And there is supposed to be two side boxes on the right of the page just like the left has. http://gryphus.clandestinedesigns.com/ Now view it in FireFox and now the problems in here are that the tables that I have the text in stretch and break apart. Also the footer is way at the bottom. This is what the site is supposed to look like, and what it looks like in Dreamweaver http://img.photobucket.com/albums/v3...reamweaver.jpg

So do anyone of you guys know how I could fix theses problems so they look like its supposed to?

Thanks!

Here is my png script...same exact as yours except without the script onload crap:

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
      }
   }
}

Saved that to a serpate .js file and then just called it from my html file:

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

In IE7 your right side doesn't show up at all.

You might want to take a look at your css because if it's broken in multiple browsers like that, it usually means the css is incorrect. use the validation tools at www.w3.org to check it...it will point out errors that more than likely will fix your problems.

Well i made a new JS doc and pasted your code in there and named it pngfix.js

then i pasted this code into the head area of the code

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

and all it does is make the banner PNG work and none of the other images.