After implementing the code below, I encountered an issue. In IE and Chrome, when hovering over the "CODE" section, the div correctly appears at position 100 x 100. However, in Firefox, the div fails to move to the specified position. What changes should be made to resolve this issue?
Here is the code snippet responsible for positioning the div:
$('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })
--Complete Code --
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
.tooltip
{
background-color: Orange;
position: absolute;
border-style: solid;
border-width: 2px;
border-bottom: solid 2px black;
}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function showDiv(batchId, vendorId) {
tooltip.style.display = "block";
batch.innerHTML = batchId;
vendor.innerHTML = vendorId;
$('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })
}
</script>
</head>
<body>
<div>
<div>
<table cellspacing="0" rules="all" border="1" id="MainContent_grdTooltip" style="border-collapse: collapse;">
<tr>
<th scope="col">MainID</th>
<th scope="col">SecondID</th>
<th scope="col">CODE</th>
</tr>
<tr>
<td>101</td>
<td>999999991</td>
<td onmouseover="showDiv(101,999999991)">55789</td>
</tr>
</table>
</div>
<div id="tooltip" class="tooltip">
<table>
<tr>
<td>Main Id:</td>
<td id="batch"></td>
</tr>
<tr>
<td>Second Id:</td>
<td id="vendor"></td>
</tr>
</table>
</div>
</div>
</body>
</html>