PDA

View Full Version : 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.


<!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
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 :):):)