...

View Full Version : FireFox not "playing nice" with showing hidden <tr> with colspan



FastCougar
02-23-2007, 05:02 PM
Here is a link to the test page on my server:

http://www.cavlog.com/hidden/test.htm

Well, here is the code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>FireFox Table Test</title>
<style>
.alternate1 {
background-color: #EEEEEE;
}
td.raised {
border-top: solid #FFFFFF 1px;
border-left: solid #FFFFFF 1px;
border-right: solid #666666 1px;
border-bottom: solid #666666 1px;
}
.titleText10 {
border-top: solid #FFFFFF 1px;
border-left: solid #FFFFFF 1px;
border-right: solid #666666 1px;
border-bottom: solid #666666 1px;
font-size: 10px;
font-weight: bold;
background-color: #003399;
color: #FFFFFF;
}
td, p {
font-family: Verdana,Arial,sans-serif;
font-size: 12px;
color: #000000;
}
</style>
<script language="javascript">
/* Expand/Collapse Related Rows */
function toggleVis(currElem,imgsc){
imgsrc = eval('document.images.' + imgsc);
if(document.layers){ // Netscape 4+
dom = document.layers[currElem].style;
}else if(document.getElementById){ // Netscape 6+, gecko, IE 5+
dom = document.getElementById(currElem).style;
}else if(document.all){ // IE 4+
dom = document.all[currElem].style;
}else{ // Browser unknown; do nothing
return ;
}
if (dom.display == "block"){
dom.display = "none";
dom.visibility = "hidden";
imgsrc.src = 'ico_expand.gif';
}else{
dom.display = "block";
dom.visibility = "visible";
imgsrc.src = 'ico_collapse.gif';
}
}
</script>
</head>
<body>
<table border="0" cellpadding="2" cellspacing="0" width="800">
<tr>
<td class="titleText10" align="left">&nbsp;</td>
<td class="titleText10" align="left">Sales Person</td>
<td class="titleText10" align="right">Revenue</td>
<td class="titleText10" align="right">Payout</td>
<td class="titleText10" align="right">Profit</td>
<td class="titleText10" align="right">GPM</td>
</tr>
<tr class="alternate1">
<td class="raised" align="left" valign="top" width="1%"><img src="ico_expand.gif" align="absmiddle" border="0" alt="Expand/Collapse 1" name="expand_img_1" style="cursor:hand;" onclick="toggleVis('viewCustomers_1','expand_img_1')"></td>
<td class="raised" align="left" valign="top" width="29%">Bill Gates</td>
<td class="raised" align="right" valign="top" width="20%">$1,543,625,298.32</td>
<td class="raised" align="right" valign="top" width="20%">$500,254,625.25</td>
<td class="raised" align="right" valign="top" width="15%">$1,043,370,673.07</td>
<td class="raised" align="right" valign="top" width="15%">67.59%</td>
</tr>
<tr id="viewCustomers_1" class="alternate1" style="visibility:hidden;display:none;">
<td class="raised">&nbsp;</td>
<td colspan="5" class="raised">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
<tr>
<td class="titleText10" align="left">Company</td>
<td class="titleText10" align="right">Revenue</td>
<td class="titleText10" align="right">Payout</td>
<td class="titleText10" align="right">Profit</td>
<td class="titleText10" align="right">GPM</td>
</tr>
<tr>
<td class="raised" align="left" valign="top" width="30%">Microsoft</td>
<td class="raised" align="right" valign="top" width="20%">$1,543,625,298.32</td>
<td class="raised" align="right" valign="top" width="20%">$500,254,625.25</td>
<td class="raised" align="right" valign="top" width="15%">$1,043,370,673.07</td>
<td class="raised" align="right" valign="top" width="15%">67.59%</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

And here is the problem:

how it displays in IE 5+
http://www.cavlog.com/hidden/IETest.gif

how it displays in FireFox
http://www.cavlog.com/hidden/FireFoxTest.gif

I have a feeling this isn't a colspan issue per-se, but a javascript issue with displaying the hidden row properly ... something like "table-row" vs. "block".

FastCougar
02-23-2007, 05:23 PM
Well, I was right .. I played around with the script and solved the problem:


function toggleVis(currElem,imgsc){
imgsrc = eval('document.images.' + imgsc);
if(document.layers){ // Netscape 4+
dom = document.layers[currElem].style;
}else if(document.getElementById){ // Netscape 6+, gecko, IE 5+
dom = document.getElementById(currElem).style;
}else if(document.all){ // IE 4+
dom = document.all[currElem].style;
}else{ // Browser unknown; do nothing
return ;
}
if (dom.display == "" || dom.display == "block" || dom.display == "table-row"){
dom.display = "none";
dom.visibility = "hidden";
imgsrc.src = 'ico_expand.gif';
}else{
dom.display = "";
dom.visibility = "visible";
imgsrc.src = 'ico_collapse.gif';
}
}

I set the display mode to "" so that the browser default takes over ... in this case, FireFox defaults PROPERLY to "table-row", which IE defaults to "block". I then add all 3 (blank, table-row & block) to the if statement ... works like a charm now.

MikeFoster
02-23-2007, 05:53 PM
Some alternative ideas...


imgsrc = document.images[imgsc];
...snip...
if (dom.display != "none"){
dom.display = "none";
dom.visibility = "hidden";
imgsrc.src = 'ico_expand.gif';
}else{
try { dom.display = 'table-row'; }
catch (e) { dom.display = 'block'; }
dom.visibility = "visible";
imgsrc.src = 'ico_collapse.gif';
}

scrupul0us
02-23-2007, 08:07 PM
... Trevor?

FastCougar
02-23-2007, 08:50 PM
At your service Mr. "NO Banana Hammocks!" ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum