title: Javascript not obeying style changes in Firefox
body: <p>To dumb it down, I have the following code highlighting my exact problem:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  &lt;script&gt;
  function updateR1(){
      if (c1.checked){
          r1.style.visibility='hidden';
      }
      else{
          r1.style.visibility='visible';
      }
  }
  function updateR2(){
      if (c2.checked){
          r2.style.display='none';
      }
      else{
          r2.style.display='table-row';
      }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table&gt;
          &lt;tr id="r1"&gt;
              &lt;td&gt;visibility&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr id="r2"&gt;
              &lt;td&gt;display&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;div&gt;
          &lt;input id="c1" type=checkbox onchange="return updateR1();"&gt;Hide row 1&lt;/input&gt;
          &lt;input id="c2" type=checkbox onchange="return updateR2();"&gt;Hide row 2&lt;/input&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p><strong>Working example ></strong> <a href="http://s.supuhstar.operaunite.com/s/content/testHideShow.htm" rel="nofollow">http://s.supuhstar.operaunite.com/s/content/testHideShow.htm</a></p>
  </blockquote>
  
  <p>In Opera, Chrome, IE, and Safari, the first checkbox makes the top row visible or invisible, and the second checkbox makes the second row compressed/invisible or extended/visible. However, in Firefox, neither of these work. Why not? I've tried many variations of this, including writing the raw script in the <code>onchange</code> attribute and using other event attributes, but it always works on everything BUT Firefox.</p>