Somthing wrong with this Script in Firefox working fine in IE

**chrjoh88** · 03-18-2010, 05:03 PM

My problem is that firefox will not follow the rule of absolut div when i delete the doctype it works like a charm..

so i really need help with understand the problem with this code.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function showBossTooltip(bossId)
{
	var tooltip = document.getElementById("boss_tooltip");
	var boss  = document.getElementById(bossId);
	
	tooltip.style.left = getElementLeft(boss) + boss.width + 10;
	tooltip.style.top = getElementTop(boss);
	
	//Set text values
	var bossname = document.getElementById("tooltip_bossname");
	var killdate = document.getElementById("tooltip_killdate");
	var newstitle = document.getElementById("tooltip_newstitle");
	
	bossname.innerHTML = bosses[bossId]['fullname'];
	killdate.innerHTML = bosses[bossId]['killdate'];
	
	if (bosses[bossId]['killdate'] == "")
	{
		bossname.className = "trash";
		killdate.style.display = "none";
	}
	else
		bossname.className = bosses[bossId]['type'];
		
	
	if (news_titles[bosses[bossId]['news_id']] != undefined)
		newstitle.innerHTML = "News title: " + news_titles[bosses[bossId]['news_id']];
	else
		newstitle.style.display = "none";
	
	tooltip.style.display = "block";
	
}

function hideBossTooltip()
{
	var tooltip = document.getElementById("boss_tooltip");
	tooltip.style.display = "none";
	document.getElementById("tooltip_newstitle").style.display = "block";
	killdate = document.getElementById("tooltip_killdate").style.display = "block";
}

function getElementLeft(element) {
  	var valueL = 0;
  	do {
    	valueL += element.offsetLeft || 0;
    	element = element.offsetParent;
  	} while (element);
  	
  	return valueL;
}

function getElementTop(element) {
  	var valueT = 0;
  	do {
    	valueT += element.offsetTop  || 0;
    	element = element.offsetParent;
  	} while (element);
  	
  	return valueT;
}
</script>
<style type="text/css">
<!--
#boss_tooltip {
	position:absolute; 
	display: none;
	padding: 0px;
}

#boss_tooltip_table {
	border: 0;
	padding: 0;
	margin: 0;
	border-collapse: collapse;
}

#tooltip_bossname {
	font-weight: bold;
	font-size: 9pt;
	
	margin: 0;
	padding: 0;
}

#tooltip_killdate {
	color: white;
	
	margin: 0;
	padding: 0;
}

#tooltip_newstitle {
	color: #1eff00;
	
	margin-top: 5px;
	padding: 0;
}

.trash {
	color: #9d9d9d;
}

.epic {
	color: #a335ee;
}

.legendary {
	color: #ff8000;	
}

#topleft {
	background-image: url(../img/tooltip_topleft.gif);
	background-repeat: no-repeat;
	height: 5px;
}

#top {
	background-image: url(../img/tooltip_top.gif);
	background-repeat: repeat-x;
}

#topright {
	background-image: url(../img/tooltip_topright.gif);
	background-repeat: no-repeat;
}

#left {
	background-image: url(../img/tooltip_left.gif);
	background-repeat: repeat-y;
}

#middle {
	background-image: url(../img/tooltip_center.gif);
	font-family: Tahoma;
	font-size: 8pt;
	padding: 0 5px 0 5px;
}

#right {
	background-image: url(../img/tooltip_right.gif);
	background-repeat: repeat-y;
	
	width: 5px;
}

#bottomleft {
	background-image: url(../img/tooltip_bottomleft.gif);
	background-repeat: no-repeat;
}

#bottom {
	background-image: url(../img/tooltip_bottom.gif);
	background-repeat: repeat-x;
	
	height: 5px;
}

#bottomright {
	background-image: url(../img/tooltip_bottomright.gif);
	background-repeat: no-repeat;
}
}
-->
</style>
</head>

<body>
<script>

var bosses = new Array();
bosses['Boss'] = new Array();
bosses['Boss']['fullname'] = 'Boss1';
bosses['Boss']['killdate'] = 'Date';
bosses['Boss']['news_id'] = '1';
bosses['Boss']['type'] = 'css';
bosses['Boss2'] = new Array();
bosses['Boss2']['fullname'] = 'Boss2';
bosses['Boss2']['killdate'] = 'Date';
bosses['Boss2']['news_id'] = '2';
bosses['Boss2']['type'] = 'css';


var news_titles = new Array();
	news_titles['1'] = 'Boss1';
	news_titles['2'] = 'Boss2';
</script>
<div id="boss_tooltip">
				<table id="boss_tooltip_table">
					<tr>
						<td id="topleft"></td>
						<td id="top"></td>
						<td id="topright"></td>
					</tr>

					<tr>
						<td id="left"></td>
						<td id="middle"><p id="tooltip_bossname"></p><p id="tooltip_killdate"></p><p id="tooltip_newstitle"></p></td>
						<td id="right"></td>
					</tr>

					<tr>
						<td id="bottomleft"></td>
						<td id="bottom"></td>
						<td id="bottomright"></td>
					</tr>
				</table>
			</div>
<img id="Boss" onmouseover="javascript:showBossTooltip(this.id);" onmouseout="javascript:hideBossTooltip();" src="img/bosses/boss.gif" />
<img id="Boss2" onmouseover="javascript:showBossTooltip(this.id);" onmouseout="javascript:hideBossTooltip();" src="img/bosses/boss2.gif" />
</body>
</html>

**vwphillips** · 03-19-2010, 11:08 AM

Code:

function showBossTooltip(bossId)
{
	var tooltip = document.getElementById("boss_tooltip");
	var boss  = document.getElementById(bossId);
	tooltip.style.left = getElementLeft(boss) + boss.width + 10+'px';
	tooltip.style.top = getElementTop(boss)+'px';
.......

**chrjoh88** · 03-19-2010, 11:54 PM

WOW i will use this forum always from now on. I have posted this everywhere with no help. cred to you vwphillips

Thread: Somthing wrong with this Script in Firefox working fine in IE

Thread Tools

Search Thread

Somthing wrong with this Script in Firefox working fine in IE

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions