Hello, I've been working hard at this page for a few hours and tired everything I can think of, but I cannot get my PNG image to display correctly in IE. It works just fine in FireFox however IE is no good. Here is a link to the page http://arbtrader.net/nba/ When you look at that page just look at slide 1. I just want to get slide 1 working correctly. Here is my HTML code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="contentslider.css" /> <style type="text/css"> <!-- .png {background: url('images/bg-png.png'); _background-image:none; filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src=images/bg-png.png,sizingMethod=crop) class="png"; width:460px; height:40px;} --> </style> <script type="text/javascript" src="contentslider.js"> </script> </head> <body> <!--Inner content DIVs should always carry "contentdiv" CSS class--> <!--Pagination DIV should always carry "paginate-SLIDERID" CSS class--> <div id="slider2" class="sliderwrapper"> <div class="contentdiv"> <table width="480" height="250" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td valign="bottom" background="images/wallace_rasheed2_490.jpg" width="480" height="250"><table width="480" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td height="97" valign="bottom" class="png" style="font-style:inherit; color:#FFFFFF">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text (<a href="#">continue link</a>)</td> </tr> </table></td> </tr> </table> </div> <div class="contentdiv"> Content 2 Here. <br /> <p></p><a href="javascript:featuredcontentslider.jumpTo('slider2', 1)">Go back to 1st slide</a></p> </div> <div class="contentdiv"> Content 3 Here. </div> <div class="contentdiv"> Content 4 Here. </div> <div class="contentdiv"> Content 5 Here. </div> </div> <div id="paginate-slider2" class="pagination"> <a href="#" class="toc"><img src="images/cha_bobcats.jpg" border="2"/></a> <a href="#" class="toc anotherclass"><img src="images/cha_bobcats.jpg" border="2"/></a> <a href="#" class="toc"><img src="images/cha_bobcats.jpg" border="2"/></a> <a href="#" class="toc"><img src="images/cha_bobcats.jpg" border="2"/></a> <a href="#" class="toc"><img src="images/cha_bobcats.jpg" border="2"/></a> </div> <script type="text/javascript"> featuredcontentslider.init({ id: "slider2", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.2], //[true/false, fadedegree] autorotate: [true, 3000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script> </body> </html>
I fixed the problem myself! It was the stupidest thing lol I looked at the CSS and had the one DIV tag using... filter: progid: DXImageTransform.Microsoft.alpha(opacity=100); -moz-opacity: 1; opacity: 1; So I removed that and it now works in both IE and FireFox