Setting cell borders in javascript via css class, FireFox renders weird.

Ok, the code I'm attaching here works in IE but renders weird in
firefox. What I'm going for is when the javascript is called to set
every cell in a specified row of the table to a dotted green border. If
I use border-collapse:separated it works in both browsers but shows
whitespace gaps between cells, so I'm trying to get it working in
collapsed mode but after about a day of work I can't figure out what
the problem could be. If anyone knows how to modify this to render
correctly in firefox and IE I'd appreciate the help!

CSS:

table.hover
{
border-collapse:collapse;
border:none 0px window;
empty-cells:show;
}

tr.hover
{
border:none 0px window;
}

td.hoverinactivecell
{
border:inset 2px black;
}

td.hoverinactivefirst
{
border-top:inset 2px black;
border-bottom:inset 2px black;
border-left:inset 2px black;
border-right:inset 0px background;
}

td.hoverinactivemiddle
{
border-top:inset 2px black;
border-bottom:inset 2px black;
border-left:inset 0px background;
border-right:inset 0px background;
}

td.hoverinactivelast
{
border-top:inset 2px black;
border-bottom:inset 2px black;
border-left:inset 0px background;
border-right:inset 2px black;
}

td.hoveractivecell
{
border:dotted 3px green;
}

td.hoveractivefirst
{
border-top:dotted 3px green;
border-bottom:dotted 3px green;
border-left:dotted 3px green;
border-right:dotted 0px background;
}

td.hoveractivemiddle
{
border-top:dotted 3px green;
border-bottom:dotted 3px green;
border-left:dotted 0px background;
border-right:dotted 0px background;
}

td.hoveractivelast
{
border-top:dotted 3px green;
border-bottom:dotted 3px green;
border-left:dotted 0px background;
border-right:dotted 3px green;
}


HTML:

<html>
<head>
<link href="Style***.css" rel="style***" type="text/css" />
<title>Untitled Page</title>
<script type="text/javascript">

function showrowmouseout(rowid)
{
var r = document.getElementById(rowid);

if (r.cells.length >=2) {
for (i = 0; i < r.cells.length; i++)
{
if (i == 0) {
r.cells[i].className = 'hoverinactivefirst';
}
else if (i == r.cells.length - 1) {
r.cells[i].className = 'hoverinactivelast';
}
else {
r.cells[i].className = 'hoverinactivemiddle';
}
}
}
else {
r.cells[0].className='hoverinactivecell';
}

}

function showrowmouseover(rowid)
{
var r = document.getElementById(rowid);

if (r.cells.length >=2) {
for (i = 0; i < r.cells.length; i++)
{
if (i == 0) {
r.cells[i].className = 'hoveractivefirst';
}
else if (i == r.cells.length - 1) {
r.cells[i].className = 'hoveractivelast';
}
else {
r.cells[i].className = 'hoveractivemiddle';
}
}
}
else {
r.cells[0].className='hoveractivecell';
}

}

</script>
</head>
<body>
<div>
<table class="hover">
<tr id="row1" class="hover"
onmouseover="showrowmouseover('row1');"
onmouseout="showrowmouseout('row1');">
<td class="hoverinactivefirst">row1 col 1</td>
<td class="hoverinactivemiddle">row1 col 2</td>
<td class="hoverinactivelast">row1 col 3</td>
</tr>
<tr id="row2" class="hover"
onmouseover="showrowmouseover('row2');"
onmouseout="showrowmouseout('row2');">
<td class="hoverinactivefirst">row2 col 1</td>
<td class="hoverinactivemiddle">row2 col 2</td>
<td class="hoverinactivelast">row2 col 3</td>
</tr>
<tr id="row3" class="hover"
onmouseover="showrowmouseover('row3');"
onmouseout="showrowmouseout('row3');">
<td class="hoverinactivefirst">row3 col 1</td>
<td class="hoverinactivemiddle">row3 col 2</td>
<td class="hoverinactivelast">row3 col 3</td>
</tr>
</table>
</div>
</body>
</html>

.