Solved

IEpngfix.htc file causes all javascript to not respond

Posted on 2008-06-17
6
1,814 Views
Last Modified: 2010-04-21
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); }
0
Comment
Question by:spotcher
  • 3
  • 2
6 Comments
 
LVL 10

Expert Comment

by:bluefezteam
ID: 21801440
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
 
LVL 16

Expert Comment

by:hankknight
ID: 21802298
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
 
LVL 16

Expert Comment

by:hankknight
ID: 21802353
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:spotcher
ID: 21805875
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
 
LVL 16

Accepted Solution

by:
hankknight earned 500 total points
ID: 21814685
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
 

Author Closing Comment

by:spotcher
ID: 31467888
Thanks, lots of help
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now