JavaScript, CSS, DOM

erobb · September 9th, 2006, 07:04 AM

I have a small script that loads a table with some elements visiblity = hidden and display = none. When clicking on the link it "opens" the hidden table elements. When click on the link again it "hides" the elements.

Now this works dandy in IE but in FireFox the element "opens" but when you click on it again to "hide" the text in the cell disappears but the actual element itself does not "dissappear" leaving a big blank space.

Working sample is here http://www.jhdesigninc.com/testJava.asp Its not "pretty" because I eliminated all the code I possible could to make the problem easier to understand.

Code Sample-----------------
<!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> blah-blah </title>
<style type="text/css">

</style>

<script type="text/JavaScript">
function changeView(objChange){
    /*have tried sniffing browser and not using getElement
        didnt seem to help with display or visibilty
        Im missing something really basic
    */
    if (document.getElementById(objChange).style.visibili ty == 'visible'){
        document.getElementById(objChange).style.display = "none";
        document.getElementById(objChange).style.visibilit y = "hidden";
    } else {
        document.getElementById(objChange).style.display = "block";
        document.getElementById(objChange).style.visibilit y = "visible";
    }

}
</SCRIPT>
</head>
<body>

<table width="449" border="0" cellspacing="1" cellpadding="1">
  <tr valign="top">
    <td width="100%" align="left" nowrap> <span class="style1">Click on the LINK Its works in IE and Netscape but not Fox. <br>

      The window does not go to display:none and visibility:hidden<br>
    In Firefox compare IE and Firefox by clicking on the view<br>
    button multiple times in both browsers
</span><br>
<br>
<BR>

      <table width="100%" border="0" cellspacing="2" cellpadding="0" id="clickTbl">
        <tr class="tblHeader">
          <td class="tblHeader">Approver</td>
          <td class="tblHeader">Status</td>

          <td class="tblHeader">Date</td>
          <td class="tblHeader">Time</td>
          <td class="tblHeader">Notes</td>
        </tr>
        <tr>
          <td>Bill Gordon</td>
          <td> Awaiting Approval</td>

          <td> Pending</td>
          <td> Pending</td>
          <td> <a href="#" onClick="changeView('notes');">View </a></td>
        </tr>
         <tr id="notes" style="visibility:hidden; display:none;">
         <td colspan="5" bgcolor="#993399"><p>some tesa safd asfd asddfdasdf
              fasd fasfd as dfas df asdf asdf asdf as dfas df asdf asd f asdf
              asdf asd asdfasda</p>
            <p>asdasdfasdf</p>

            <p>asdf</p>
            <p>a</p>
            <p>sdf </p></td>
        </tr>
        <tr>
          <td>Brenda Hudson</td>
          <td> Under Review</td>

          <td> Pending</td>
          <td> Pending</td>
          <td> Cell Below Not Relevant</td>
        </tr>
      </table></td>
  </tr>
</table>
</body>

</html>
End Code-------------------------------

Any help would be greatly appreciated.

Thanks,
Earl

erobb · September 10th, 2006, 06:44 AM

Never Mind I got it worked out.

Earl