Odd TR issues.

[iPixel]

So i feel this forum has the best chance of explaining this issue to me.

 

I've got a table that looks more or less like so... (simplified for easier reading)

 

<table cellpadding="0" cellspacing="0" border="0" width="100%">
     <tr>
          <td>Name</td>
          <td>field1</td>
          <td>field2</td>
          <td>field3</td>
          <td>field4</td>
     </tr>
     <tr id="12345" style = "display:none;">
          <td>info(name)</td>
          <td>info(f1)</td>
          <td>info(f2)</td>
          <td>info(f3)</td>
          <td>info(f4)</td>
     </tr>
</table>

 

as you can see the second TR is hidden via CSS, and i have some JS that shows it onClick.

 

now my problem is that this works just fine in IE, but bug out completely in FF and Chrome.

 

When i do this in FF/Chrome  basically all the f1,f2,f3,f4 get displayed as if all the td's were squeezed into the first one "name". As opposed to properly spreading beneath the header TR.

This works exactly as intended in IE, so i'm baffled. I even tried putting <div>'s around the tr's and make those not display but that just didnt work at all.

[akitchin]

what display setting are you changing it to?

[iPixel]

I'm changing it to document.getElementById(idname).style.display = 'block';

 

Here are screenshots of what's happening.

 

Working Version on IE

 

Bugging Out Version on Chrome/FF

[ignace]

now my problem is that this works just fine in IE, but bug out completely in FF and Chrome.

 

If FF and Chrome do something strange then the problem lies with you. Because both browsers are the best around. It would be a lesser deal if it would bug in IE. IE is known for that... You know: BUGS

 

Post your code.

[iPixel]

my JS:

 

function UnfoldTree(divArray, branchid)
{	
	//alert(divArray);
	var fnarray = divArray.split(",");
	for(i in fnarray)
		{
			//alert(fnarray[i]);
			var rowid = fnarray[i];
			//alert(rowid);
			if(obj = document.getElementById(rowid))
				{
					if(document.getElementById(rowid).style.display == 'none')
						{
							document.getElementById(rowid).style.display = 'block';
							//change + to -
							document.getElementById(branchid).src = 'images/minus.gif';
						}
					else
						{
							document.getElementById(rowid).style.display = 'none';
							//change + to -
							document.getElementById(branchid).src = 'images/plus.gif';
						}
				}
		}
}

 

 

my table

 

<tr id="<?php echo $result_2['FILENUMBER']; ?>" style="display:none;">
                            <td width="250" style="border-bottom:1px solid #CCCCCC; color:#336699;">      
                            <img src="images/plus.gif" width="9" height="9" border="0">   
                            <?php 
                            echo $result_2['FIRSTNAME'] . " " . $result_2['LASTNAME'] . " ( " . $result_2['PHONE'] . " )"; 
                            ?>
                            </td>
                            <td align="center" class="tapit_orange" style="color:#336699;"><?php echo $usr_call_count_incoming; ?></td>
                            <td align="center" class="tapit_orange" style="color:#336699;"><?php echo $usr_call_count_incoming_unq; ?></td>
                            <td align="center" class="tapit_orange" style="color:#336699;"><?php echo $usr_call_time_incoming_total; ?></td>
                            <td align="center" class="tapit_pink" style="color:#336699;"><?php echo $usr_call_count_outgoing; ?></td>
                            <td align="center" class="tapit_pink" style="color:#336699;"><?php echo $usr_call_count_outgoing_unq; ?></td>
                            <td align="center" class="tapit_pink" style="color:#336699;"><?php echo $usr_call_time_outgoing_total; ?></td>
                            <td align="center" class="tapit_blue" style="color:#336699;"><?php echo $usr_call_count_total; ?></td>
                            <td align="center" class="tapit_blue" style="color:#336699;"><?php echo $usr_call_count_total_unq; ?></td>
                            <td align="center" class="tapit_blue" style="color:#336699;"><?php echo $usr_call_time_all_total; ?></td>
                            <td align="center" class="tapit_green" style="color:#336699;"><?php echo round($usr_avg_per_rep_per_day_calls); ?></td>
                            <td align="center" class="tapit_green" style="color:#336699;">0</td>
                            <td align="center" class="tapit_green" style="color:#336699;">0</td>
                        </tr>

[iPixel]

I figured it out... instead of displaying as 'block' i simply said...  style.display = 'table-row'; and this works perfectly across all 3 browsers!