display none/inline for table row (firefox)

[tbirnseth]

I'm trying to hide/display a table row. In FF, each time the row is displayed/hidden, an extra line break is added to the display. Under IE, it seems to work as I would expect. Works the same with the display value being 'inline' or 'block'.


<script language="javascript" type="text/javascript">
function setDisplay(id, val) {
tag = document.getElementById(id);
if( tag )
tag.style.display = val;
}
</script>
<table>
<tr style="display:none;" id="testTr" >
<td >
blah blah blah
</td>
</tr>
<tr >
<td >
<a href="#" id="test" onclick="setDisplay('testTr', 'inline');return false;" >open me</a>
</td>
</tr>
<tr >
<td >
<a href="#" id="test" onclick="setDisplay('testTr', 'none');return false;" >close me</a>
</td>
</tr>
</table>


Any thoughts on how to get FF not to insert a line break before each transition between 'none' and 'inline'?

[Kravvitz]

The problem here is that IE doesn't support the correct values for the display property on table related elements. CSS2 says <tr>s have display:table-row by default. Check out Hiding and Unhiding Table Rows (http://www.dynamicsitesolutions.com/javascript/hiding-and-unhiding-table-rows/).

[tbirnseth]

Works perfectly when doing a browser specific display property.

thanks

[Kor]

a simple cross browser solution is to use an empty value: '' for positive display

element.style.display='';