M
mathewda
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="StyleSheet.css" rel="stylesheet" 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.className = 'hoverinactivefirst';
}
else if (i == r.cells.length - 1) {
r.cells.className = 'hoverinactivelast';
}
else {
r.cells.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.className = 'hoveractivefirst';
}
else if (i == r.cells.length - 1) {
r.cells.className = 'hoveractivelast';
}
else {
r.cells.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>
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="StyleSheet.css" rel="stylesheet" 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.className = 'hoverinactivefirst';
}
else if (i == r.cells.length - 1) {
r.cells.className = 'hoverinactivelast';
}
else {
r.cells.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.className = 'hoveractivefirst';
}
else if (i == r.cells.length - 1) {
r.cells.className = 'hoveractivelast';
}
else {
r.cells.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>