title: JavaScript show hide function layout issue firefox chrome
body: <p>I have a asp.net gridview where I hide and show columns using 'onclick' on the selected check-box.
  The hidden columns are showing fine in IE, when clicked, however they overlap in Chrome, Firefox. I must be missing something, it is as if they get added to the same column. As I am new I can post a screenshot.</p>
  
  <p>Any help greatly appreciated. </p>
  
  <pre><code>function showColumn(r,grid) {
  
  rows = document.getElementById("GridView1").rows;
  drop = document.getElementById(grid);
  if (drop.checked == true) {
  
      for (i = 0; i &lt; rows.length; i++) {
          rows[i].cells[r].style.display = "block";
  
          }
      }
  
  else if (drop.checked == false) {
      for (i = 0; i &lt; rows.length; i++) {
          rows[i].cells[r].style.display = "none";
  
          }
      }
  }
  
  &lt;p&gt;
      &lt;asp:CheckBox ID="CheckBox1" runat="server" onclick="showColumn(2,'CheckBox1')" 
          Text="Show Option Name" /&gt;
  &lt;/p&gt;
  &lt;p&gt;
      &lt;asp:CheckBox ID="CheckBox2" runat="server" onclick="showColumn(1,'CheckBox2')" 
          Text="Show ID" /&gt;
  &lt;/p&gt;
  </code></pre>