Javascript ToolTip Problem in IE

programming web dev
1

Alright, so I found this cool Tool Tip java @ http://www.samisite.com/test-csb2nf/id121.htm

Anyway, I put it on my page: http://www.thespeedlounge.com/infotest.shtml

and it looks great in Firefox (need to get some spacing issues fixed with the pictures) but IE puts the Tool Tip very high for some reason.

here’s the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="speed lounge, tsl articles, speed trials usa, project dc2, d1 2006, nhra d1, tsl" />
<title>TSL: Information</title>
<link rel="stylesheet" type="text/css" href="http://www.thespeedlounge.com/maintest.css" />
<script src="navi.js" type="text/javascript"></script>

<style type="text/css">
body {
	text-align:center;
	background-image: url(images/tile.jpg);
	background-repeat: repeat-x;
		}
#container {
	width:940px;
	margin:auto;
	padding:0px;
	text-align:left;
	}
.floatright { 
	float: right; 
	margin: 5px 5px 5px 5px;
	border: 1px solid #666;
	}
.floatleft { 
	float: left; 
	margin: 10px 10px 10px 10px;
	border: 1px solid #666;
	}
.floatmiddle { 
	float: left; 
	margin: 5px 5px 5px 30px;
	border: 1px solid #666;
	}
#left {
		height:1160px;
		float:left;
		voice-family: "\"}\"";
		voice-family:inherit;
		width:184px;
		}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and 
Opera streches it half way. */
html>body #left {
	 /* ie5win fudge ends */
	width:184px;
	}
.leftmenu {
		voice-family: "\"}\"";
		voice-family:inherit;
		width:170px;
		}
.leftmenu2 {
		width:170px;
		height:1120px;
		}
#middle {
		height:1160px;
		float:left;
		voice-family: "\"}\"";
		voice-family:inherit;
		margin-left:5px;
		width:710px;
		}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and 
Opera streches it half way. */
html>body #middle {
     /* ie5win fudge ends */
	width:729px;
	}
.middlemenu {
		width:715px;
		}
.middlemenu2 {
		width:615px;
		height:1120px;
		}

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { text-decoration: underline; color:  #CC0066 }
#pup {position:absolute; visibility:hidden; z-index:200; width:260; }
 
</style>
</head>

<body>

<div id="container">

	<div id="title">
	<!--#include file="header.html" -->
	</div>
	<div id="header"></div>
	<div id="navi">		
	<!--#include virtual="/nav2.html" -->		
	</div>
	<br />
	<div id="left">
			<p class="leftmenu">&nbsp;&gt;&gt; <strong>Advertisement</strong></p>
			<p class="leftmenu2">
				<!--#include file="info/advertise.html" -->
			</p>    
	</div>
	<div id="middle">
	<!--
   ######################################################
   # JAVASCRIPT POPUPS ROUTINE VERSION #7 07-Feb-2001   #        
   # Written by Mike McGrath [mike_mcgrath@lineone.net] # 
   # PC-Tested for Netscape 3.04, 4.61, 6.0, & IE5.5    #
   # Note: Popups may not cover all form field inputs.  #
   # PLEASE RETAIN THIS NOTICE WHEN COPYING MY SCRIPT.  #
   # THIS SCRIPT IS COPYRIGHT OF MIKE MCGRATH 1998-2001 #
   ######################################################
-->
<script type="text/javascript">
<!-- Original: Mike McGrath  (mike_mcgrath@lineone.net) -->
<!-- Web Site: http://website.lineone.net/~mike_mcgrath -->
<!--

var Xoffset= -80;        // modify these values to ...
var Yoffset= -80;        // change the popup position.
var popwidth=200;       // popup width
var bcolor="darkgray";  // popup border color
var fcolor="white";     // popup font color
var fface="verdana";    // popup font face

// create content box
document.write("<DIV ID='pup'></DIV>");

// id browsers
var iex=(document.all);
var nav=(document.layers);
var old=(navigator.appName=="Netscape" && !document.layers && !document.getElementById);
var n_6=(window.sidebar);

// assign object
var skin;
if(nav) skin=document.pup;
if(iex) skin=pup.style;
if(n_6) skin=document.getElementById("pup").style;

// park modifier
var yyy=-1000;

// capture pointer
if(nav)document.captureEvents(Event.MOUSEMOVE);
if(n_6) document.addEventListener("mousemove",get_mouse,true);
if(nav||iex)document.onmousemove=get_mouse;

// set dynamic coords
function get_mouse(e)
{
  var x,y;

  if(nav || n_6) x=e.pageX;
  if(iex) x=event.x+document.body.scrollLeft; 
  
  if(nav || n_6) y=e.pageY;
  if(iex)
  {
    y=event.y;
    if(navigator.appVersion.indexOf("MSIE 4")==-1)
      y+=document.body.scrollTop;
  }

  if(iex || nav)
  {
    skin.top=y+yyy;
    skin.left=x+Xoffset; 
  }

  if(n_6)
  {
    skin.top=(y+yyy)+"px";
    skin.left=x+Xoffset+"px";
  }    
  nudge(x);
}

// avoid edge overflow
function nudge(x)
{
  var extreme,overflow,temp;

  // right
  if(iex) extreme=(document.body.clientWidth-popwidth);
  if(n_6 || nav) extreme=(window.innerWidth-popwidth);

  if(parseInt(skin.left)>extreme)
  {
    overflow=parseInt(skin.left)-extreme;
    temp=parseInt(skin.left);
    temp-=overflow;
    if(nav || iex) skin.left=temp;
    if(n_6)skin.left=temp+"px";
  }

  // left
  if(parseInt(skin.left)<1)
  {
    overflow=parseInt(skin.left)-1;
    temp=parseInt(skin.left);
    temp-=overflow;
    if(nav || iex) skin.left=temp;
    if(n_6)skin.left=temp+"px";
  }
}

// write content & display
function popup(msg,bak)
{

  var content="<TABLE WIDTH='"+popwidth+"' BORDER='1' BORDERCOLOR="+bcolor+" CELLPADDING=2 CELLSPACING=0 "+"BGCOLOR="+bak+"><TD ALIGN='center'><FONT COLOR="+fcolor+" FACE="+fface+" SIZE='2'>"+msg+"</FONT></TD></TABLE>";

  if(old)
  {
    alert(msg);
    return;
  } 
   
  yyy=Yoffset; 
  skin.width=popwidth;

  if(nav)
  { 
    skin.document.open();
    skin.document.write(content);
    skin.document.close();
    skin.visibility="visible";
  }

  if(iex)
  {        
    pup.innerHTML=content;
    skin.visibility="visible";
  }  

  if(n_6)
  {   
    document.getElementById("pup").innerHTML=content;
    skin.visibility="visible";
  }
}


// park content box
function kill()
{
  if(!old)
  {
    yyy=-1000;
    skin.visibility="hidden";
    skin.width=0;
  }
}

//-->
</script>
		<p class="middlemenu">&nbsp;&gt;&gt; <strong>Information</strong></p>
	  	<p class="middlemenu2">
			
			<a href="info/speed1.shtml" onmouseover="popup('SpeedTrials USA<BR>November, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()"><img class="floatleft" src="images/info/l11.jpg" alt="SpeedTrials USA - November, 2006"/></a>
			  
	  

			<a href="info/sema.shtml" onmouseover="popup('The Best of SEMA<BR>November, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()"><img class="floatleft" src="images/info/l10.jpg" alt="The Best of Sema - November, 2006"/></a>

			
		
			<a href="info/scion.shtml" onmouseover="popup('Scion Challenge 3.0<BR>November, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()"><img class="floatleft" src="images/info/l9.jpg" alt="Scion Challenge 3.0 - November, 2006"/></a>
	
			
		
			<a href="info/drift1.shtml" onmouseover="popup('Project Drift: Part 1<BR>November, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()"><img class="floatleft" src="images/info/l8.jpg"  alt="Project Drift: Part 1 - November, 2006"/></a>
			
			
            <a href="info/projectdc2.shtml" onmouseover="popup('Honda Day: Project DC2<BR>August, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()"><img class="floatleft" src="images/info/l7.jpg" alt="Honda Day: Project DC2 - August, 2006" /></a>
			

		
            <a href="info/hondaday.shtml" onmouseover="popup('Honda Day: BFG Diary<BR>August, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()" onmouseover="po"><img class="floatleft" src="images/info/l6.jpg"  alt="Honda Day: BFG Diary  - August, 2006" /></a>

			
            <a href="info/vegas1.shtml" onmouseover="popup('NHRA/D1 Vegas: Day 1<BR>July, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()" onmouseover="po">
				<img class="floatleft" src="images/info/l5.jpg" alt="NHRA/D1 Vegas: Day 1 - July, 2006" /></a>

			
              <a href="info/vegas2.shtml" onmouseover="popup('NHRA/D1 Vegas: Day 2<BR>July, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()" onmouseover="po"><img class="floatleft" src="images/info/l4.jpg" alt="NHRA/D1 Vegas: Day 2 - July, 2006" /></a>			
			
            <a href="info/vegas3.shtml" onmouseover="popup('NHRA/D1 Vegas: Day 3<BR>July, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()" onmouseover="po"><img class="floatleft" src="images/info/l3.jpg" alt="NHRA/D1 Vegas: Day 3 - July, 2006" /></a>

				   
		
            <a href="info/info1.shtml" onmouseover="popup('Preparing for the 1320<BR>May, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()" onmouseover="po"><img class="floatleft" src="images/info/l2.jpg" alt="Preparing for the 1320 - May, 2006" /></a>
        
						   
			
             <br/><a href="info/info3.shtml" onmouseover="popup('Q AND A w/ Staple<BR>May, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()" onmouseover="po"><img class="floatleft" src="images/info/l1.jpg" alt="Q AND A w/ Staple - May, 2006" /></a>
           
			
		</p>
 	</div>
  	<div id="footer" >
	<!--#include virtual="/footer.html" -->
	</div>
 </div> 
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-418872-1";
urchinTracker();
</script>
</body>
</html>