• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 967
  • Last Modified:

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

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<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=""http://www.w3.org/1999/xhtml"" 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=""http://www.geotherma.be/geo/site/2007/favicon1.ico"" 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='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Ecotechnieken';" style="cursor: pointer;">
  	<p>Predikboomstraat, 25</p>
  	<p>8650 Diksmuide</p>
  	<p>0478 622 853</p>
	<div id="spot2" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=E-Advies';" style="cursor: pointer;">
  	<p>Sasstraat, 36</p>
  	<p>9050 Gentbrugge</p>
  	<p>0486 83 29 76</p>
	<div id="spot3" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Integrated 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='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Daisomont';" 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='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Turelinckx 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='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Jordaan';" style="cursor: pointer;">
  	<p>Babelomstraat, 35</p>
  	<p>3320 Hoegaarden</p>
  	<p>0473 321 264</p>

	<div id="spot7" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Daco-projects';" style="cursor: pointer;">
  	<p>Kattemstraat, 62</p>
  	<p>1760 Roosdaal</p>
  	<p>053 43 03 98</p>

	<div id="spot8" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Jaco';" style="cursor: pointer;">
  	<p>Ballaarstraat, 33</p>
  	<p>3270 Scherpenheuvel</p>
  	<p>0479 30 94 46</p>

	<div id="spot9" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Hamalco';" style="cursor: pointer;">
  	<p>Spoorwegstraat, 35</p>
  	<p>3665 As</p>
  	<p>0479 41 04 98</p>

	<div id="spot10" onClick="location.href='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Loenders 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='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Bema 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='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Leukemans 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='http://www.geotherma.be/warmtepomp/contactcalcul.asp?name=Aresis 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="http://www.geotherma.be/newdesign3/images/menu_lft.jpg" 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="http://www.geotherma.be/newdesign3/images/menu_rht.jpg" 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 + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
<script type="text/javascript"> 
var pageTracker = _gat._getTracker("UA-1590523-2");

Open in new window

  • 7
  • 6
  • 3
  • +1
2 Solutions
That's a tall order for 20 points, eh?
1. Verify your page validates (http://validator.w3.org/)  - 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.
expertsgerritAuthor Commented:
I increased the number of points to 500.
Someone please come up with a working solution, not just tips.
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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.
Göran AnderssonCommented:
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 + 'google-analytics.com/ga.js" 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.

Göran AnderssonCommented:
Oops. One less closing parenthesis:

document.write('<scr'+'ipt src="' + gaJsHost + 'google-analytics.com/ga.js" type="text/javascript"></scr'+'ipt>');
expertsgerritAuthor Commented:
To all, fixed all the errors that stand a "clear view" in the way,
check it here : http://validator.w3.org/check?uri=http://bit.ly/644j9W&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator/1.654

So please provide me with a solution!
Here is the url again: http://bit.ly/644j9W
Göran AnderssonCommented:
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:
expertsgerritAuthor Commented:
followed your instructions. look now please.
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.
Sorry, incorrect tag. The right one is:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
expertsgerritAuthor Commented:
Just did add that tag.
Nothing changes in IE 8
What do YOU see when you hover over the orange dots?
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.
expertsgerritAuthor Commented:
Kindly check again, I put right after the <head> tag.
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));
You could also try an updated version of domLib and domTT officially supporting IE8:

expertsgerritAuthor Commented:
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.

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 7
  • 6
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now