Textarea isn't rendering in IE7

Question

Hello, For some reason my textareas are not being show in IE7. I am using checkboxes in a form, and when they clicked, it called a javascript function that opens up a corresponding textarea. It works fine in every other main browser but not in IE7.

Here is an example of the code I'm using.

The HTML:

<input name="areasOfConcern1" type="checkbox" id="concern1" value="Frequently misses classes" onClick="checkedTest('concern1', 'concern1Text')" onblur="checkedTest('concern1', 'concern1Text')" />
 Attendance
 <div id="concern1Text" style="visibility:hidden;position:absolute;display:none;">
 <textarea  onfocus="removeText(this)" onblur="addText(this)" cols="90" name="areasOfConcern1Text" id="areasOfConcern1Text">Comments...</textarea>
</div>

The JS Function:

function checkedTest(checkBox, divId)
{
 box = eval("document.getElementById(checkBox)");
 div = eval("document.getElementById(divId)");
 if(box.checked == true)
 {
  div.style.visibility="visible";
  div.style.display="block";
  div.style.position="relative";
 }
 else
 {
  div.style.visibility="hidden";
  div.style.display="none";
  div.style.position="absolute";
 }
}

Any ideas on how to make this work?

Thanks, Josh

Answer 1

Could it be that visibilty and display, or maybe your position are the problem? I don't spot any problem in the code after reading a few times. When I want to toggle elements I only use the display attribute and this works fine for me, also in IE.

Answer 2

the problem seems to be due to setting div.style.position, although I'm not sure why it is. Removing the position style from concern1Text and removing the related js assignment statemnts seems to fix the issue.

and as long as we're fixing things, the first 2 lines of your method should not be using eval. they can be written in the form of

box = document.getElementById(checkBox);