IEpngfix.htc file causes all javascript to not respond

What is the javascript that isn't running properly?

Is this other functions aside from the PNGFix? there may be functions in the other javascript that's causing a conflict.

Can you add a link so I can dug test this?

Thanks

I had this trouble last year myself so I know exactly what you are talking about.

The problem is caused by a htc script that is used to make Ping images have an alpha transparency in Internet Explorer 5.5 and 6.  It is NOT needed on any other browsers.

I solved the problem by:
   1.  Replacing the htc code with in-line css code
   2.  Using a conditional statement so the special css code was only called by IE 5.5 and IE 6.

Add this code before you close your </head>

                  <!--[if IE 6]><style type="text/css" media="screen">@import "pngFix.css";</style><![endif]-->
                  <!--[if IE 5]><style type="text/css" media="screen">@import "pngFix.css";</style><![endif]-->

Create a css file called pngFix.css and add this:

                  .search-wrapper .right { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.example.com/image.png'); }

Make sure that the image path is absolute and begins with http:// because CSS and JS handle relative paths differently.

the issue Im having is not getting the htc file to load its getting it not to crash all javascript. Once htc fix loaded javascript on site doesnt work, I wish I could provide a link to show but I signed a NDA so I cant. It also has nothing to do with browser detection because it doesnt crash in other browsers. Im still looking for the solution. I already know all different ways to load file and make it have browser detection but. Why this is such a big issue and Ill explain code a little more. I have a login box that popsup on a div tag and screen fades dims out the login box has a transparency and screen fade out has transparency this works great in all browsers who have png transparency. Once i try to load png transparency .htc file fix transparency issue, the java script to x out of the box doesnt respond and the input fields dont respond. I have ex code... but cant post link..

html div
####################################
<div class="dimming" name="windowcontent" id="windowcontent" style="position: absolute; top:20%; left:40%; display:none;">
            <form method="post" style="margin: 0px;" action="login.php" name="loginform" id="loginFormId">
                  <input name="act[login]" id="act[login]" value="Login" type="hidden">
                  <table align="center">
                  <tr>
                        <td align="left"><span class="blue_txt">LOG IN</span></td><td colspan="2" align="left"><span class="message_error" id="errorSpan" style="display: none;text-align: left;">Login error - wrong user name</span></td>
                        <td align="right" colspan="2"><span class="blue_txt"><a href="" onclick="hideDiv('windowcontent');return false;"><b>x</b></a> </span></td>
                  </tr>
                  <tr style="padding: 10px;">
                        <td><span class="blue_txt">USERNAME:</span></td>
                        <td>
                        <input style="padding: 6px 0px 0px 10px; background: url(design/pic/uname.jpg) center center no-repeat; height: 19px; width: 187px;" id="login1" name="login" value="" class="input" type="text"></td>
                        <td rowspan="2" style="padding: 6px 6px 5px 20px; background: url('design/pic/login_cell_bg.jpg') no-repeat right;">
                              <a onclick="tryLogin();return false;" onmouseout="changeImageMy('login_button','design/pic/login.jpg');return true;" onmouseover="changeImageMy('login_button','design/pic/login_over.jpg');return true;" href="#">
                                 <img id="login_button" name="act[login]" src="design/pic/login.jpg" alt="login">
                              </a>
                        </td>
                        
                  </tr>
                  <tr style="padding: 10px;">
                        <td><span class="blue_txt">PASSWORD:</span></td>
                        <td><input id="login2" name="pass" value="" class="input" style="padding: 6px 0px 0px 10px; background: url(design/pic/uname.jpg) center center no-repeat; height: 19px; width: 187px;" type="password"></td>
                  </tr>
                  </table>
            </form>
          <div style="display:none; vertical-align: middle; margin: 10px;" id="formhide2" align="center">                      
                <table class="pbar3" cellpadding="0" cellspacing="0" style="vertical-align: middle;">
                <tr>
                <td>
                      <span id="progress1">&nbsp; &nbsp;</span>
                      <span id="progress2">&nbsp; &nbsp;</span>
                      <span id="progress3">&nbsp; &nbsp;</span>
                      <span id="progress4">&nbsp; &nbsp;</span>
                      <span id="progress5">&nbsp; &nbsp;</span>
                      <span id="progress6">&nbsp; &nbsp;</span>
                      <span id="progress7">&nbsp; &nbsp;</span>
                      <span id="progress8">&nbsp; &nbsp;</span>
                      <span id="progress9">&nbsp; &nbsp;</span>
                </td>
                </tr>
                </table>      
                {literal}<script type="text/javascript">do_prog(9,200);</script>{/literal}
          </div>
</div>





 javascript
######################################################
                  function buildDimmerDiv()
                  {
                      document.write('<div id=\"dimmer\" name=\"dimmer\" class=\"dimmer\" style=\"width:'+ window.screen.width + 'px; height:' + window.screen.height +'px; display:none;\"><\/div>');
                  }
                  
                  
                  function hideDiv(id){                  
                        document.getElementById(id).style.display = "none";
                        document.getElementById('dimmer').style.visibility = "hidden";
                        document.getElementById('dimmer').style.display = "none";
                  }
                function displayWindow()
                {
                   var divId="windowcontent";
                   document.getElementById('dimmer').style.visibility = "visible";
                   document.getElementById('dimmer').style.display = "";
                   document.getElementById(divId).className = 'dimming';
                     document.getElementById(divId).style.visibility = "visible";
                     document.getElementById(divId).style.display = "";
                }
                function displayLocationWindow()
                {
                   var divId="changeLocatinWindow";
                   document.getElementById('changeLocatinWindow').style.visibility = "visible";
                   document.getElementById('changeLocatinWindow').style.display = "";
                   document.getElementById(divId).className = 'changeLocatinWindow';
                     document.getElementById(divId).style.visibility = "visible";
                     document.getElementById(divId).style.display = "";
                }
                  function hideLocationWindow(){                  
                        document.getElementById('changeLocatinWindow').style.display = "none";
                        document.getElementById('changeLocatinWindow').style.visibility = "hidden";
                        document.getElementById('changeLocatinWindow').style.display = "none";
                  }                
                function changeImageMy(imgId,imagePath){                
                      document.getElementById(imgId).src=imagePath;
                }                
      

external css file reference
###############################################################

img, div { behavior: url(design/js/iepngfix.htc); }

.search-wrapper .right { behavior:url(/design/js/iepngfix.htc); }

Thanks, lots of help