IEpngfix.htc file causes all javascript to not respond

I been working on this bug for days and finally narrowed the issue down to the iehtcpngfix.htc file. I noticed it when I first loaded browser tried to login in IE version 6 the png file didnt load then all my javascript started working magically again but after the png files where loaded properly javascript doesnt respond.

css code
##########################

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

.search-wrapper .right { behavior:url(/design/js/iepngfix.htc); }
spotcherAsked:
Who is Participating?
 
hankknightConnect With a Mentor Commented:
Is the iepngfix.htc file the same one that can be downloaded here?
http://www.twinhelix.com/css/iepngfix/

If so there is a known conflict between certain versions of Windows and that code.
If you do a Windows update and get Service Pack 3 this problem should go away.  The better solution would be to eliminate the use of iepngfix.htc and replace its functionality  with filter:progid:DXImageTransform.Microsoft.AlphaImageLoader as outlined in my comment above.

0
 
bluefezteamCommented:
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
0
 
hankknightCommented:
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.
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
hankknightCommented:
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.
0
 
spotcherAuthor Commented:
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); }
0
 
spotcherAuthor Commented:
Thanks, lots of help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.