Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › PNG image showing up with white background in IE Please Help
New Posts  All Forums:Forum Nav:

PNG image showing up with white background in IE Please Help

post #1 of 11
Thread Starter 
I have a .png image with a transparent background in my header. It shows up great in Firefox, but when I view the page in IE it will show up with a white background. Could this be my version of IE? Can someone tell me why this is happening? You can view the template that I'm working on at www.jrcwebs.com/template.html

Thanks,
Joe
post #2 of 11
Must be your version of IE. Looks the same in both FF and IE for me.
page%20problem.PNG
Obsiden V2.0
(18 items)
 
HP Touchpad
(0 items)
Random Tech Stuff
(27 photos)
CPUMotherboardGraphicsRAM
Intel Core I7 970 @ 4.2Ghz Asus Rampage Formula III ASUS GTX780 12GB G.Skill DDR3 1600 
Hard DriveHard DriveCoolingOS
Samsung 840  Toshiba 5tb Thermalright Silver Arrow Windows 10  
MonitorMonitorKeyboardPower
Auria 27" 1440p IPS @85hz Acer H243Hbmid 24"  Ducky Shine Zero TKL MX Browns OCZ 1010watt 
CaseMouseMouse PadAudio
Syrillian Built Tech Bench (Obsiden Silence) Zowie EC2 Blue SteelSeries QcK Mini Creative ZxR 
AudioAudio
KRK Rokkit 5 Gen2 Tonar USB Condesnsor Mic 
  hide details  
Reply
Obsiden V2.0
(18 items)
 
HP Touchpad
(0 items)
Random Tech Stuff
(27 photos)
CPUMotherboardGraphicsRAM
Intel Core I7 970 @ 4.2Ghz Asus Rampage Formula III ASUS GTX780 12GB G.Skill DDR3 1600 
Hard DriveHard DriveCoolingOS
Samsung 840  Toshiba 5tb Thermalright Silver Arrow Windows 10  
MonitorMonitorKeyboardPower
Auria 27" 1440p IPS @85hz Acer H243Hbmid 24"  Ducky Shine Zero TKL MX Browns OCZ 1010watt 
CaseMouseMouse PadAudio
Syrillian Built Tech Bench (Obsiden Silence) Zowie EC2 Blue SteelSeries QcK Mini Creative ZxR 
AudioAudio
KRK Rokkit 5 Gen2 Tonar USB Condesnsor Mic 
  hide details  
Reply
post #3 of 11
Ie 6? smile.gif
Old is Old
(13 items)
 
  
CPUMotherboardGraphicsRAM
P4 HT 3.2GHz Gigabyte GA-81945GZME XFX Radeon 4770 512MB G.skill 1GB+Kingston 512MB 533MHz 
Hard DriveOptical DriveOSPower
Seagate 7200 LG DVD Windows XP SP3 ATX 400W 
  hide details  
Reply
Old is Old
(13 items)
 
  
CPUMotherboardGraphicsRAM
P4 HT 3.2GHz Gigabyte GA-81945GZME XFX Radeon 4770 512MB G.skill 1GB+Kingston 512MB 533MHz 
Hard DriveOptical DriveOSPower
Seagate 7200 LG DVD Windows XP SP3 ATX 400W 
  hide details  
Reply
post #4 of 11
Thread Starter 
Yes it's version 6
post #5 of 11
Quote:
Originally Posted by Peachhunter12;14559062 
Yes it's version 6

Mother of God. Do you need it to be IE6?
Old is Old
(13 items)
 
  
CPUMotherboardGraphicsRAM
P4 HT 3.2GHz Gigabyte GA-81945GZME XFX Radeon 4770 512MB G.skill 1GB+Kingston 512MB 533MHz 
Hard DriveOptical DriveOSPower
Seagate 7200 LG DVD Windows XP SP3 ATX 400W 
  hide details  
Reply
Old is Old
(13 items)
 
  
CPUMotherboardGraphicsRAM
P4 HT 3.2GHz Gigabyte GA-81945GZME XFX Radeon 4770 512MB G.skill 1GB+Kingston 512MB 533MHz 
Hard DriveOptical DriveOSPower
Seagate 7200 LG DVD Windows XP SP3 ATX 400W 
  hide details  
Reply
post #6 of 11
Quote:
Originally Posted by myonlyaccount;14559089 
Mother of God. Do you need it to be IE6?

Since lots of users still use IE6, he'll obviously want it to work on as many browsers as he can - IE6 being one of the main ones.
Toaster
(12 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 4790K ASUS Maximum VII Impact Z97 OcUK GeForce GTX 970 "NVIDIA 970 Cooler Edition" 16GB (2x8GB) Low-profile Corsair DDR3 Vengeance 
Hard DriveCoolingOSMonitor
500GB Samsung 850 EVO Corsair H100i Microsoft Windows 8.1 Dell UltraSharp U2312HM 
KeyboardPowerCaseMouse
Logitech G15 600W SFX Silverstone Strider NCASE M1 Zowie FK1 
  hide details  
Reply
Toaster
(12 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 4790K ASUS Maximum VII Impact Z97 OcUK GeForce GTX 970 "NVIDIA 970 Cooler Edition" 16GB (2x8GB) Low-profile Corsair DDR3 Vengeance 
Hard DriveCoolingOSMonitor
500GB Samsung 850 EVO Corsair H100i Microsoft Windows 8.1 Dell UltraSharp U2312HM 
KeyboardPowerCaseMouse
Logitech G15 600W SFX Silverstone Strider NCASE M1 Zowie FK1 
  hide details  
Reply
post #7 of 11
I'm 99% sure its an issue with IE6, it doesn't support transparency in PNG's.
TudjBox.
(16 items)
 
  
CPUMotherboardGraphicsRAM
Intel i5 2500k Asus P8Z68V Gen3 PRO Sapphire Radeon HD7970 Corsair Vengeance 1866 
Hard DriveHard DriveOptical DriveCooling
OCZ Vertex II Samsung F3 1TB Sony DVD-RW Thermalright Silver Arrow 
OSMonitorKeyboardPower
Windows 7 x64 iiyama ProLite 24" 16:9 Filco Ninja Majestouch-2 Corsair HX620 
CaseMouseMouse PadAudio
Antec P182 G5 SteelSeries Cambridge Audio DAC Magic 
  hide details  
Reply
TudjBox.
(16 items)
 
  
CPUMotherboardGraphicsRAM
Intel i5 2500k Asus P8Z68V Gen3 PRO Sapphire Radeon HD7970 Corsair Vengeance 1866 
Hard DriveHard DriveOptical DriveCooling
OCZ Vertex II Samsung F3 1TB Sony DVD-RW Thermalright Silver Arrow 
OSMonitorKeyboardPower
Windows 7 x64 iiyama ProLite 24" 16:9 Filco Ninja Majestouch-2 Corsair HX620 
CaseMouseMouse PadAudio
Antec P182 G5 SteelSeries Cambridge Audio DAC Magic 
  hide details  
Reply
post #8 of 11
There is commonly available java script which will address this.

I remember our web design instructor pointing us toward it because of IE 6's shortcoming.
    
CPUMotherboardGraphicsRAM
Xeon E5645 Asus Rampage II Gene eVGA GTX460 SSC 3x4GB Corsair Dominator PC3-12800 
Hard DriveHard DriveHard DriveOS
Crucial C300 64GB Seagate Momentus XT 750 Western Digital GP 2TB EARS Windows 7 Premium 
MonitorKeyboardPowerCase
Asus VE278Q DSI SMK-88 Seasonic X-660 Lian Li U6B 2011 SE 
MouseMouse Pad
Logitech G500 KAI.g3 HIEN - HARD 
  hide details  
Reply
    
CPUMotherboardGraphicsRAM
Xeon E5645 Asus Rampage II Gene eVGA GTX460 SSC 3x4GB Corsair Dominator PC3-12800 
Hard DriveHard DriveHard DriveOS
Crucial C300 64GB Seagate Momentus XT 750 Western Digital GP 2TB EARS Windows 7 Premium 
MonitorKeyboardPowerCase
Asus VE278Q DSI SMK-88 Seasonic X-660 Lian Li U6B 2011 SE 
MouseMouse Pad
Logitech G500 KAI.g3 HIEN - HARD 
  hide details  
Reply
post #9 of 11
Quote:
Originally Posted by RonindeBeatrice;14559159 
Try dropping this javascript into the header of your webpage.
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]-->

That should work just fine. I don't use IE at all. I use Chrome.
post #10 of 11
Thread Starter 
It worked after clicking yes on the active x alert that came up
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › PNG image showing up with white background in IE Please Help