Make a jscript work in all versions of MS Internet Explorer like it works in Mozilla

Posted on 2010-01-04
Last Modified: 2013-12-08
Hi this is about a page that works fine in all browsers except versions of MS Internet Explorer.
Open the page in Chrome or Firefox or Safari and you will see how it should be working in MS Internet Explorer.
there are two issues that do not work in  MS IE.
1. the displaying of the yellow address pane when hovering over the orange dots
2. the clickthrough to the contactpage

I  have attached a zip with the files in question except for the asp file, the code for that file has been pasted in the code section.
Can you make it work in all versions of MS Internet Explorer?
<!--#include virtual="warmtepomp/cd7.asp"-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

	<script type="text/javascript">
function showText() {

if(document.getElementById("txt").style.display=="block") {
} else {

<title>Warmtepomp - prijs, kosten en besparingen - GeoTherma</title>
<meta name="robots" content="index"/> 
<meta name="robots" content="archive"/> 
<meta name="googlebot" content="archive"/>  
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="nl" /> 
	<meta name="description" content="GeoTherma berekent samen met u de prijs &eacute;n de besparingen van de warmtepomp op korte &eacute;n lange termijn." /> 
	<meta name="keywords" content="warmtepomp, prijs, kosten, besparingen" /> 
<meta name="verify-v1" content="VIq6zvKQV3q29FvDgVJM5ffyNx0hRhFU5slBdYHRZ18=" />

headCrLf = headCrLf & "<html xmlns="""" xml:lang=""" & lingnlfr & """ lang=""" & lingnlfr & """>" & vbCrLf
if inStr(title, "Geotherma") <> 0 then
headCrLf = headCrLf & "<head><title>" & title & "</title>" & vbCrLf
headCrLf = headCrLf & "<head><title>" & title & " | GeoTherma</title>" & vbCrLf
end if
headCrLf = headCrLf & "<meta name=""keywords"" lang=""" & lingnlfr & """ content=""" & keywords & """/>" & vbCrLf
headCrLf = headCrLf & "<meta name=""description"" lang=""" & lingnlfr & """ content=""" & content & """/>" & vbCrLf
headCrLf = headCrLf & "<link rel=""shortcut icon"" href="""" type=""image/x-icon"" />" & vbCrLf
verify = "<meta name=""verify-v1"" content=""VIq6zvKQV3q29FvDgVJM5ffyNx0hRhFU5slBdYHRZ18="" />" & vbCrLf
headCrLf = headCrLf & verify 


 <link href="example.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" language="javascript" src="JS/domLib.js"></script>
    <script type="text/javascript" language="javascript" src="JS/domTT.js"></script>
    <script type="text/javascript" language="javascript">
var domTT_styleClass = 'domTTClassic';

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie.css" media="screen" />


   <div id="wrapper">
    <div class="toppix"></div>
     <div id="content_wrapper">
  <!-- Mainwindow start -->
 <div class="main_container"> 
   <div class="windowpix2"></div>
        <div style="background:url(images/main_topall.jpg) bottom center no-repeat; height:27px; float:left; width:962px;"></div>
        <div style="background:url(images/rpt_main.jpg) repeat-y; width:965px; height:auto; margin:0;">
    <div class="mainwindow">
     <div class="mainwindow_top">
        <h2>Kostprijs : is er sprake van een meerinvestering?</h2>
    <div class="mainwindow_middle">
   <div class="main">
    <img src="map.jpg" alt="" width="520" height="426" border="0" usemap="#Map" />
<map name="Map">
<!-- spot 1 -->
  <area shape="circle" coords="59,114,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot1'), 'type', 'velcro');">
 <!-- spot 1 ends -->
<!-- spot 2 -->  
<area shape="circle" coords="172,106,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot2'), 'type', 'velcro');">
<!-- spot 2 ends -->

<!-- spot 3 -->  
<area shape="circle" coords="217,88,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot3'), 'type', 'velcro');">
<!-- spot 3 ends -->

<!-- spot 4 -->  
<area shape="circle" coords="244,96,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot4'), 'type', 'velcro');">
<!-- spot 4 ends -->

<!-- spot 5 -->  
<area shape="circle" coords="292,102,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot5'), 'type', 'velcro');">
<!-- spot 5 ends -->

<!-- spot 6 -->  
<area shape="circle" coords="309,154,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot6'), 'type', 'velcro');">
<!-- spot 6 ends -->

<!-- spot 7 -->  
<area shape="circle" coords="212,143,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot7'), 'type', 'velcro');">
<!-- spot 7 ends -->

<!-- spot 8 -->  
<area shape="circle" coords="332,125,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot8'), 'type', 'velcro');">
<!-- spot 6 ends -->

<!-- spot 9 -->  
<area shape="circle" coords="381,122,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot9'), 'type', 'velcro');">
<!-- spot 9 ends -->

<!-- spot 10 -->  
<area shape="circle" coords="380,84,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot10'), 'type', 'velcro');">
<!-- spot 10 ends -->

<!-- spot 11 -->  
<area shape="circle" coords="239,155,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot11'), 'type', 'velcro');">
<!-- spot 11 ends -->

<!-- spot 12 -->  
<area shape="circle" coords="368,244,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot12'), 'type', 'velcro');">
<!-- spot 12 ends -->

<!-- spot 13 -->  
<area shape="circle" coords="168,186,4" href="#" onMouseOver="domTT_activate(this, event, 'content', document.getElementById('spot13'), 'type', 'velcro');">
<!-- spot 13 ends -->

  <div id="container" style="display: none;">
	<div id="spot1" onClick="location.href='';" style="cursor: pointer;">
  	<p>Predikboomstraat, 25</p>
  	<p>8650 Diksmuide</p>
  	<p>0478 622 853</p>
	<div id="spot2" onClick="location.href='';" style="cursor: pointer;">
  	<p>Sasstraat, 36</p>
  	<p>9050 Gentbrugge</p>
  	<p>0486 83 29 76</p>
	<div id="spot3" onClick="location.href=' Systems';" style="cursor: pointer;">
  	<p>Integrated Systems</p>
  	<p>Vrasenestraat, 45</p>
  	<p>9100 Sint-Niklaas</p>
  	<p>03 336 59 48</p>

	<div id="spot4" onClick="location.href='';" style="cursor: pointer;">
  	<p>Baron Van Ertbornstraat, 106B</p>
  	<p>2630 Aartselaar</p>
  	<p>03 827 35 97</p>

	<div id="spot5" onClick="location.href=' Dave';" style="cursor: pointer;">
  	<p>Turelinckx Dave</p>
  	<p>2220 Heist-op-den-Berg</p>
  	<p>0479 360 040</p>

	<div id="spot6" onClick="location.href='';" style="cursor: pointer;">
  	<p>Babelomstraat, 35</p>
  	<p>3320 Hoegaarden</p>
  	<p>0473 321 264</p>

	<div id="spot7" onClick="location.href='';" style="cursor: pointer;">
  	<p>Kattemstraat, 62</p>
  	<p>1760 Roosdaal</p>
  	<p>053 43 03 98</p>

	<div id="spot8" onClick="location.href='';" style="cursor: pointer;">
  	<p>Ballaarstraat, 33</p>
  	<p>3270 Scherpenheuvel</p>
  	<p>0479 30 94 46</p>

	<div id="spot9" onClick="location.href='';" style="cursor: pointer;">
  	<p>Spoorwegstraat, 35</p>
  	<p>3665 As</p>
  	<p>0479 41 04 98</p>

	<div id="spot10" onClick="location.href=' Marc';" style="cursor: pointer;">
  	<p>Loenders Marc</p>
  	<p>Astridlaan, 249</p>
  	<p>3900 Overpelt</p>
  	<p>011 61 14 29</p>

	<div id="spot11" onClick="location.href=' sprl';" style="cursor: pointer;">
  	<p>Bema sprl</p>
  	<p>Rue Rodenbach, 69</p>
  	<p>1190 Forest</p>
  	<p>02 347 10 33</p>

	<div id="spot12" onClick="location.href=' Dave';" style="cursor: pointer;">
  	<p>Leukemans Dave</p>
  	<p>Rue du Monument, 22</p>
  	<p>6940 Grandhan</p>
  	<p>086 49 94 00</p>

	<div id="spot13" onClick="location.href=' sprl';" style="cursor: pointer;">
  	<p>Aresis sprl</p>
  	<p>rue du Mont, 126</p>
  	<p>7812 Mainvault</p>
  	<p>0495 559 749</p>


  <!-- Mainwindow ends -->
  <!--#include virtual="warmtepomp/rightside.asp"-->
<div class="clear"></div>   
 <div style="height:10px;"><img src="images/lower_main.jpg" alt="" height="10" width="962" /></div> 

      <div class="clear"></div>

     <div class="windowsmallpix"></div>
 <!-- lower container starts -->    
   <div id="lowercontainer">
  <!-- lowerleft window -->
<!--#include virtual="warmtepomp/lwrbox1.asp"-->
  <!-- lowerleft window ends -->

<!--#include virtual="warmtepomp/lwrbox2.asp"-->
  <!-- lowerwindow center ends -->
<!--#include virtual="warmtepomp/lwrbox3.asp"-->
  <!-- lowerright window ends-->
    <div class="clear"></div>
   <div class="windowpix"></div>

<!-- lowercontainer ends -->

<!-- main container ends -->

<!-- upper container starts -->

<!--#include virtual="warmtepomp/upperpart1.asp"-->
  <!-- greenbar starts -->
<div class="greenbar">
      <div class="greenbar_lft">
       <img src="" alt="" width="21" height="54" />      </div>
      <div class="greenbar_center">
       <div id="nav_title">

            <% response.write homeurl %>          </li> 
            <% response.write verwarmingurl %>          </li>
            <% response.write warmwaterurl %>          </li> 
            <% response.write koelingurl %>          </li>
            <% response.write nieuwbouwurl %>          </li>
            <% response.write verwarmingketelurl %>          </li>
		     <li class="current_page_item"> 
            <% response.write besparingurl %>          </li> 
      <div class="greenbar_rht">
       <img src="" alt="" width="19" height="54" />      </div>
  <!-- greenbar ends -->  
   <div class="clear"></div>
   <div class="windowpix"></div>
  <!-- flashwindow start -->
<!--#include virtual="warmtepomp/banner.asp"-->

  <!-- flashwindow ends -->
 <!-- content wrapper ends -->   
 <!-- wrapper ends -->

      <div class="clear"></div>

   <script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "' type='text/javascript'%3E%3C/script%3E"));
<script type="text/javascript"> 
var pageTracker = _gat._getTracker("UA-1590523-2");

Open in new window
Question by:expertsgerrit
    LVL 29

    Expert Comment

    That's a tall order for 20 points, eh?
    LVL 6

    Expert Comment

    1. Verify your page validates (  - there seems to be several unclosed elements, which can cause layout problems in IE and other browsers (the problem will likely be different in each browser)

    2. Fix the obvious javascript errors that triggers each time the page is loaded. The google analytics code at the end of the page is broken. Enable the javascript debugger in IE, or check the console or Firebug in Firefox to get those errors and warnings.

    Once the page loads without errors and validate correctly, let us know.

    You may want to reimplement your tooltip code with a more standard (and especially more up-to-date) library such as, maybe, jQuery, or at least update your current library (domTT) to the latest version.

    Author Comment

    I increased the number of points to 500.
    Someone please come up with a working solution, not just tips.
    LVL 6

    Expert Comment

    I can (try to) come up with a solution when the validation and javascript errors are fixed. Currently those are preventing me from properly debugging the page.
    LVL 29

    Expert Comment

    by:Göran Andersson
    What I first notice is that the page doesn't have a start tag for the html element.

    When I test the page, I get script errors. The script that includes the google analytics script doesn't work properly. Escaping the stript tag doesn't help, so the end tag in the string terminates the script tag before the string ends. Do like this instead:

    document.write('<scr'+'ipt src="' + gaJsHost + '" type="text/javascript"></scr'+'ipt>'));

    In XHTML the attribute names should be lower case, so the onMouseOver attributes in the map should be onmouseover. The onClick attributes in the spots should be onclick.

    LVL 29

    Expert Comment

    by:Göran Andersson
    Oops. One less closing parenthesis:

    document.write('<scr'+'ipt src="' + gaJsHost + '" type="text/javascript"></scr'+'ipt>');

    Author Comment

    To all, fixed all the errors that stand a "clear view" in the way,
    check it here :

    So please provide me with a solution!
    Here is the url again:
    LVL 29

    Assisted Solution

    by:Göran Andersson
    It works fine in IE 8 in IE7 compatibility mode.

    domTT 0.7.3 doesn't work in IE 8. There is a link here that is supposed to have a version that supports IE 8:

    Author Comment

    followed your instructions. look now please.
    LVL 6

    Expert Comment

    Works well in IE6, IE7 and in IE8 in compatibility mode, so add this in the head section of your page:

    <add name="X-UA-Compatible" value="IE=EmulateIE7" />

    This will force IE8 to use IE7 compatibility mode.
    LVL 6

    Expert Comment

    Sorry, incorrect tag. The right one is:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

    Author Comment

    Just did add that tag.
    Nothing changes in IE 8
    What do YOU see when you hover over the orange dots?
    LVL 6

    Expert Comment

    IE8 fails to register the X-UA-Compatible tag due to its location. I think you must put it at the beginning of the head section, at least before any stylesheet or script, for it to consider the tag.

    When I (manually) put IE8 in IE7 compatibility mode, I see the same tooltips I see in IE6 and 7.

    Author Comment

    Kindly check again, I put right after the <head> tag.
    LVL 6

    Accepted Solution

    Ok, the tag didn't give the result I expected. But with it I've been able to narrow down the source of the problem.

    domLib.js uses restrictive browser detection code, ans since that code has been written when IE6 was mainstream, it detects IE7 but not IE8 - it thinks IE8 is an incompatible browser.

    So, all you need to do is to open domLib.js, line 53.

    var domLib_isIE = (!domLib_isKHTML && !domLib_isOpera && (domLib_userAgent.indexOf('msie 5') != -1 || domLib_userAgent.indexOf('msie 6') != -1 || domLib_userAgent.indexOf('msie 7') != -1));


    var domLib_isIE = (!domLib_isKHTML && !domLib_isOpera && (domLib_userAgent.indexOf('msie 5') != -1 || domLib_userAgent.indexOf('msie 6') != -1 || domLib_userAgent.indexOf('msie 7') != -1 || domLib_userAgent.indexOf('msie 8') != -1));
    LVL 6

    Expert Comment

    You could also try an updated version of domLib and domTT officially supporting IE8:

    Author Comment

    Looks good!  the replacement in lin 56 seems to have done the trick.
    Let me run it through the most unwilling version of IE 8 I encountered on a pc I cannot reach before the morning.
    Have a good rest;
    Talk to you in the morning.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 Specialist

    HTML5 development skills are critical to all developers. HTML5 is the foundation to almost any development process. That's why business, design studios, development shops and other organizations need HTML5 developers. Get your foot in the door as a HTML5 specialist.

    Now-a-days, indirectly, postal services have been replaced by email services. Yes, whenever we hear the word "email" a lot of people only think of gmail. Some people still think that email and gmail are one and the same thing :-). Let's see some …
    I recently found myself in a Corporate Situation where the client had requested blocking access to any and all websites except his own Domain? Easy? I am sure this would be your answer but their requirement was, this has to be done without using…
    This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
    How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

    779 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

    15 Experts available now in Live!

    Get 1:1 Help Now