Clan Adverts

www.idevaffiliate.com/31216/idevaffiliate.php?id=203_0_1_3

 

Tutorials Main
Latest Tutorials
Popular Tutorials
Top Rated Tutorials
Clan Themes Search
  
Login to See your Favorite Tutorials

PNG Fix For Internet Explorer

Description: As a theme designer its very annoying when i think about who i should be designing the theme for, there are so many factors to think about.. One of them being a problem in Internet Explorer 6 and below. If you have IE7 then don't worry.
Version: 1.0
Added on: 13 June 2007
Author: ped
Difficulty Level: Easy
Views: 493
Rating: 9.3 (3 Votes)
Detailed Profile • View Comments (1) •

This quick tutorial will show you how to use javascript to render PNG images when some users still use internet explorer 6 and below.

Open header.php (in your main root)

We are going to be placing this script in between your head tags as seen below

Code:

<head>script goes here</head>
Here we go then open header.php and find:
Code:

</head>


ABOVE THAT Add:

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]-->
<?php


Thats it save it and re upload you can then view your page source and see the new added code in-between the head tags and whats best about it is if your using PNG images they will now render correctly in Internet Explorer

Tutorials ©