• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1335
  • Last Modified:

Alternating row color and mouseover row color not working in IE7 or firefox

I've obviously gone wrong somewhere but this code looks right so any ideas where I have gone wrong??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.row1 {
      background-color:#CCCCCC;
      color:#333333;
}

.row2 {
      background-color:#FFFFFF;
      color:#333333;
}
.rowHover1 {
      background-color:#000000;
      color:#ffffff;
}
-->
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="33%">Heading</td>
    <td width="33%">Heading</td>
    <td width="33%">Count</td>
  </tr>
  <tr class="row1" onmouseover="this.class='rowHover1'" onmouseout="this.class='row1'">
    <td>1</td>
    <td>link1</td>
    <td>count1</td>
  </tr>
  <tr class="row2" onmouseover="this.class='rowHover1'" onmouseout="this.class='row2'">
    <td>2</td>
    <td>link2</td>
    <td>count2</td>
  </tr>
  <tr class="row1" onmouseover="this.class='rowHover1'" onmouseout="this.class='row1'">
    <td>3</td>
    <td>link3</td>
    <td>count3</td>
  </tr>
  <tr class="row2" onmouseover="this.class='rowHover1'" onmouseout="this.class='row2'">
    <td>4</td>
    <td>link4</td>
    <td>count4</td>
  </tr>
</table>
</body>
</html>
0
abenbow
Asked:
abenbow
1 Solution
 
iscodeCommented:
try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.row1 {
     background: #CCCCCC;
     color: #333333;
}

.row2 {
     background: #FFFFFF;
     color:#333333;
}
.rowHover1 {
     background: #000000;
     color: #ffffff;
}
-->
</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="33%">Heading</td>
    <td width="33%">Heading</td>
    <td width="33%">Count</td>
  </tr>
  <tr class="row1" onmouseover="this.className='rowHover1'" onmouseout="this.className='row1'">
    <td>1</td>
    <td>link1</td>
    <td>count1</td>
  </tr>
  <tr class="row2" onmouseover="this.className='rowHover1'" onmouseout="this.className='row2'">
    <td>2</td>
    <td>link2</td>
    <td>count2</td>
  </tr>
  <tr class="row1" onmouseover="this.className='rowHover1'" onmouseout="this.className='row1'">
    <td>3</td>
    <td>link3</td>
    <td>count3</td>
  </tr>
  <tr class="row2" onmouseover="this.className='rowHover1'" onmouseout="this.className='row2'">
    <td>4</td>
    <td>link4</td>
    <td>count4</td>
  </tr>
</table>
</body>
</html>
0
 
ZvonkoSystems architectCommented:
How about this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zvonko &#42;</title>
<style type="text/css">
<!--
.row1 {
     background-color:#CCCCCC;
     color:#333333;
}

.row2 {
     background-color:#FFFFFF;
     color:#333333;
}
.rowHover1 {
     background-color:#000000;
     color:#ffffff;
}
-->
</style>
<script>
function highLight(e){
  var theRow = (e.target)?e.target:e.srcElement;
  while(theRow&&theRow.nodeName!="TR"){
    theRow = theRow.parentNode;
  }
  if(theRow){
    if(e.type.indexOf("out")>0){
      theRow.className=theRow.getAttribute("orgClass");
    } else {
      theRow.setAttribute("orgClass",theRow.className);
      theRow.className="rowHover1";
    }
  }
}
</script>
</head>

<body>
<table width="100%" onmouseover="highLight(event)" onmouseout="highLight(event)">
  <tr>
    <td width="33%">Heading</td>
    <td width="33%">Heading</td>
    <td width="33%">Count</td>
  </tr>
  <tr class="row1">
    <td>1</td>
    <td>link1</td>
    <td>count1</td>
  </tr>
  <tr class="row2">
    <td>2</td>
    <td>link2</td>
    <td>count2</td>
  </tr>
  <tr class="row1">
    <td>3</td>
    <td>link3</td>
    <td>count3</td>
  </tr>
  <tr class="row2">
    <td>4</td>
    <td>link4</td>
    <td>count4</td>
  </tr>
</table>
</body>
</html>


0
 
ahoffmannCommented:
<script >
var oldbg="#ffffff";
function lighton(i){
        oldbg=i.style.backgroundColor;
        i.style.backgroundColor="CCCCCC";
}
function lightoff(i) { i.style.backgroundColor=oldbg; }
</script>
...
<tr  onMouseOver=lighton(this) onMouseOut=lightoff(this)>
...
0
 
abenbowAuthor Commented:
bingo, thanks
0
 
iscodeCommented:
your welcome
glad I could help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now