PDA

View Full Version : Transparency issues in IE


Shemo
November 1st, 2007, 12:55
I'm having some issues with transparency for a section on my index page. We have tsviewer, which is used to monitor TeamSpeak, on the front page which is transparent. Well, atleast it is in Firefox, but not in IE, it goes to a white background. I have ran the code through an html validator and it came back with 0 errors. I'm not sure what to do....
Here's the link *view it in IE and Firefox* http://www.absoluteeliteclan.com/index2.html

Here's the code used to produce the front page:



<body bgColor="#000000">

<div id="image1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:1028px; height:1018px; z-index:0"><img src="images/newkore01.gif" border=0 width=1028 height=1018></div>

<div id="html1" style="position:absolute; overflow:hidden; left:443px; top:928px; width:152px; height:95px; z-index:1">
<center><embed src="http://www.jellymuffin.com/generators/customclocks/clock.swf?s=59&h=1&u=http://www.jellymuffin.com/generators/customclocks/&i=5&b=0x000000" quality="high" wmode="transparent" width="81.4" height="81.4" name="Custom Clock" align="middle" allowScriptAccess="samedomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br><font size="-2"></center></div>

<div id="html3" style="position:absolute; overflow:hidden; left:30px; top:334px; width:316px; height:517px; z-index:2">
<iframe name="tsviewer" allowtransparency="true" src="http://www.absoluteeliteclan.com/refresh.html" width="250" height="600" frameborder="0" style="width: px; height: px; " scrolling="no" ></iframe></div>

<div id="html2" style="position:absolute; overflow:hidden; left:303px; top:360px; width:420px; height:348px; z-index:3">
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/HheFB8QaIr8"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/HheFB8QaIr8" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object></div>

<div id="html4" style="position:absolute; overflow:hidden; left:150px; top:868px; width:149px; height:30px; z-index:4">
<a href="http://profile.xfire.com/hazy00"><img src="http://miniprofile.xfire.com/bg/bg/type/3/hazy00.png" width="149" height="29" border="0"/></a></div>

<div id="html5" style="position:absolute; overflow:hidden; left:726px; top:867px; width:149px; height:30px; z-index:5">
<a href="http://profile.xfire.com/andrewshemo"><img src="http://miniprofile.xfire.com/bg/bg/type/3/andrewshemo.png" width="149" height="29" border="0" /></a></div>

<div id="html6" style="position:absolute; overflow:hidden; left:596px; top:837px; width:149px; height:30px; z-index:6">
<a href="http://profile.xfire.com/spiritof350sb"><img src="http://miniprofile.xfire.com/bg/bg/type/3/spiritof350sb.png" width="149" height="29" border="0" /></a></div>

<div id="html7" style="position:absolute; overflow:hidden; left:439px; top:837px; width:149px; height:30px; z-index:7">
<a href="http://profile.xfire.com/trips11"><img src="http://miniprofile.xfire.com/bg/bg/type/3/Trips11.png" width="149" height="29" border="0" /></a></div>

<div id="html8" style="position:absolute; overflow:hidden; left:282px; top:837px; width:149px; height:30px; z-index:8">
<a href="http://profile.xfire.com/blkhorse311"><img src="http://miniprofile.xfire.com/bg/bg/type/3/blkhorse311.png" width="149" height="29" border="0" class="style10" /></a></div>

<div id="flash1" style="position:absolute; overflow:hidden; left:143px; top:50px; width:747px; height:146px; z-index:9">
<script type="text/javascript">
AC_RunFlashContent('id','flash1','width','747','height','146 ','quality','high','autoplay','true','loop','true','wmode',' window','codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab','pluginspage','http://www.macromedia.com/go/getflashplayer','src','images/newbanner.swf');
</script>
<noscript>
<object width=747 height=146 classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value="images/newbanner.swf">
<param name="quality" value="high">
<param name="loop" value="true">
<param name="wmode" value="window">
<param name="autoplay" value="true">
<embed src="images/newbanner.swf" width=747 height=146 quality="high" TYPE="application/x-shockwave-flash" wmode="window" loop="true" autoplay="true" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>
</noscript>
</div>

<div id="image10" style="position:absolute; overflow:hidden; left:610px; top:979px; width:168px; height:26px; z-index:10"><a href="mailto:support@absoluteeliteclan.com"><img src="images/webmasters.gif" border=0 width=168 height=26></a></div>

<div id="image9" style="position:absolute; overflow:hidden; left:357px; top:870px; width:318px; height:28px; z-index:11"><img src="images/adminonduty.gif" border=0 width=318 height=28></div>

<div id="rollimg1" style="position:absolute; overflow:hidden; left:114px; top:294px; width:124px; height:29px; z-index:12">
<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollimg1','','images/aejoinmsover.gif',1)" href="http://www.absoluteeliteclan.com/App.html" target="_blank">
<img name="rollimg1" onLoad="MM_preloadImages('images/aejoinmsover.gif')" width=124 height=29 alt="" border=0 src="images/aejoin.gif">
</a></div>

<div id="rollimg2" style="position:absolute; overflow:hidden; left:779px; top:294px; width:142px; height:29px; z-index:13">
<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollimg2','','images/scrimmsover.gif',1)" href="http://www.absoluteeliteclan.com/scrim.html" target="_blank">
<img name="rollimg2" onLoad="MM_preloadImages('images/scrimmsover.gif')" width=142 height=29 alt="" border=0 src="images/Scrim.gif">
</a></div>

<div id="rollimg4" style="position:absolute; overflow:hidden; left:179px; top:241px; width:109px; height:25px; z-index:14">
<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollimg4','','images/biosover.gif',1)" href="Bios.html">
<img name="rollimg4" onLoad="MM_preloadImages('images/biosover.gif')" width=109 height=25 alt="" border=0 src="images/bios.gif">
</a></div>

<div id="rollimg5" style="position:absolute; overflow:hidden; left:322px; top:241px; width:109px; height:25px; z-index:15">
<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollimg5','','images/forumsover.gif',1)" href="http://www.absoluteeliteclan.com/forums/" target="_blank">
<img name="rollimg5" onLoad="MM_preloadImages('images/forumsover.gif')" width=109 height=25 alt="" border=0 src="images/forums.gif">
</a></div>

<div id="rollimg6" style="position:absolute; overflow:hidden; left:459px; top:241px; width:109px; height:25px; z-index:16">
<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollimg6','','images/creedover.gif',1)" href="Creed.html">
<img name="rollimg6" onLoad="MM_preloadImages('images/creedover.gif')" width=109 height=25 alt="" border=0 src="images/creed.gif">
</a></div>

<div id="rollimg7" style="position:absolute; overflow:hidden; left:597px; top:241px; width:109px; height:25px; z-index:17">
<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollimg7','','images/dwnloadover.gif',1)" href="Downloads.html">
<img name="rollimg7" onLoad="MM_preloadImages('images/dwnloadover.gif')" width=109 height=25 alt="" border=0 src="images/dwnload.gif">
</a></div>

<div id="rollimg9" style="position:absolute; overflow:hidden; left:874px; top:241px; width:109px; height:25px; z-index:18">
<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollimg9','','images/mediaover.gif',1)" href="Media.html">
<img name="rollimg9" onLoad="MM_preloadImages('images/mediaover.gif')" width=109 height=25 alt="" border=0 src="images/media.gif">
</a></div>

<div id="image2" style="position:absolute; overflow:hidden; left:265px; top:981px; width:156px; height:26px; z-index:19"><a href="#top"><img src="images/topofpage.gif" border=0 width=156 height=26></a></div>

<div id="rollimg10" style="position:absolute; overflow:hidden; left:44px; top:241px; width:109px; height:25px; z-index:20">
<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollimg10','','images/homeover.gif',1)" href="index.html">
<img name="rollimg10" onLoad="MM_preloadImages('images/homeover.gif')" width=109 height=25 alt="" border=0 src="images/homeover.gif">
</a></div>

<div id="rollimg3" style="position:absolute; overflow:hidden; left:746px; top:240px; width:98px; height:25px; z-index:21">
<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollimg3','','images/conditionsmsover.gif',1)" href="conditions.html">
<img name="rollimg3" onLoad="MM_preloadImages('images/conditionsmsover.gif')" width=98 height=25 alt="" border=0 src="images/conditions.gif">
</a></div>

</body>
</html>


I had to edit out some of the code to get it to fit, but where I'm having issues is in the iframe, which is where the tsviewer code is.
Any help would be greatly appreciated.

Thanks,
Andrew
themoose
November 1st, 2007, 18:36
Make this into a file pngfix.js and then call it how it explains in the file.


/*

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

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