Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts

    FireFox not "playing nice" with showing hidden <tr> with colspan

    Here is a link to the test page on my server:

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

    Well, here is the code:

    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+


    how it displays in FireFox


    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".
    Last edited by FastCougar; 02-23-2007 at 05:08 PM.

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I was right .. I played around with the script and solved the problem:

    Code:
    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.

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Some alternative ideas...
    Code:
      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';
      }

  • #4
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ... Trevor?
    IF I DID GOOD THROW ME A REP POINT

  • #5
    Regular Coder
    Join Date
    Jan 2004
    Posts
    117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    At your service Mr. "NO Banana Hammocks!"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •