can anyone pls help me why FIREFOX displays 'reference to undefined property' message for this html page? It works fine in IE.

<html>
<head>
<title>Expandible row test in firefox</title>
<STYLE type="text/css">
.collapsed
{
DISPLAY: none;
}
</STYLE>
<script language="javascript" type="text/javascript"> 
//***collapsible rows 
function outliner(evt) {
evt = (evt) ? evt : (window.event) ? window.event : ""; 
var oMe; 
if (evt.srcElement) { 
oMe = evt.srcElement; 
} else if (evt.target) { 
oMe = evt.target; 
} 
if (evt.srcElement) { 
//for IE 
var child = document.all[oMe.getAttribute("child",false)];
} 
else { 
//for Firefox 
var child = document.getElementById[oMe.getAttribute("child",false)];
} 
//get child element
//if child element exists, expand or collapse it.
if (null != child)
child.className = child.className == "collapsed" ? "expanded" : "collapsed";
}
function changepic(evt) {
evt = (evt) ? evt : (window.event) ? window.event : ""; 
var uMe; 
if (evt.srcElement) { 
uMe = evt.srcElement; 
} else if (evt.target) { 
uMe = evt.target; 
} 
var check = uMe.src.toLowerCase();
if (check.lastIndexOf("expand.gif") != -1)
{
uMe.src = "collapse.gif";
}
else
{
uMe.src = "expand.gif";
}
}
</script>
</head>
<body onclick="outliner(event)">
<table cellpadding="2" cellspacing="0" width="98%" class="infotable" bgcolor="#f4f4f4">
<caption class="issuetitle">NARMC Sleep Disorders Clinic Intake Form</caption>
<thead >
<tr>
<th class="header" width="1%" />
<td class="header"> Last Name:</td>
<td class="header"> First Name:</td>
<td class="header"> Gender:</td>
</tr>
</thead>

<tr>
<td class="content"><A HREF="javascript:" onClick="document.getElementById['srcidDBData115847296']"><IMG border="0" alt="expand/collapse" class="expandable" height="11" onclick="changepic(event)" src="expand.gif" width="9" child="srcidDBData115847296" ></A></td>
<td class="content">Caloris</td>
<td class="content">Morris</td>
<td class="content">M</td>
</tr>

<tr class="collapsed" bgcolor="#ffffff" id="srcidDBData115847296">
<td colspan="4"> Test
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Capitalizing DISPLAY is the problem. CSS is case-sensitive, and display is a lowercase property.

IE is the one messing up, because it is treating it as case-insensitive.

All of your tags and properties should be lowercase.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.