display: none problem in mozilla

[arjanz]

My problem is the following script works perfectly in IE6 but doesn't in Mozilla. It's supposed to make a new text input visible when a checkbox is checked. Can someone help me out?

<script>
function SetState(obj_checkbox, obj_text)
{ if(obj_checkbox.checked)
{ NwLink.style.display = 'block';
return true;
}
else
{ NwLink.style.display = 'none';
return true;
}
}
</script>

<form name="form">
<table width="600">
<tr>
<td>
News:<br>
<input type="checkbox" onclick="SetState(this, document.form.NewsIntroText)">
</td>
</tr>
<tr id="NwLink" style="display: none;">
<td>
Intro text:<br>
<input type="Text" name="NewsIntroText">
</td>
</tr>
<tr>
<td>
and here is some more text
</td>
</tr>
</table>
</form>

[outrun]

Try display: invisible its better to use <div> tags as well for this sort of thing.

regards,
Mark

[arjanz]

nope, invisible is not working.... other options?

[BlobFisk]

Welcome to WebmasterWorld, arjanz!

You are trying to hide a table row (<tr>), which is problematic as it is an integral element within the table.

Why not put a <div> in the <td> that holds the element you wish to hide, and use:

document.getElementById('layerName').style.visibility='hidden/visible'

To toggle the showing and hiding of the layer and element.

[arjanz]

In order not to change the layout of the site (in which I also use ColdFusion code) the only option is hiding the table row. Maybe it's imposible in Mozilla/Netscape, in which case I'll have to find another solution....

[BlobFisk]

I'm working blind here, but how would surrounding the element in a <div> be changing the layout? Do you mean making a sitewide change?

[arjanz]

hehehe I know it's sounding a bit strange... I have to work with a layout that's not supposed to change. The original page is build with tables with 1px solid borders etc etc etc.

[drbrain]

Use The DOM, Luke

document.getElementById('NwLink').style.display = 'hidden'

Write your page for standards, don't be IE specific.