title: IE CSS bug: table border showing div with visibility: hidden, position: absolute
body: <h2>The issue</h2>
  
  <p>I have a <code>&lt;div&gt;</code> on a page which is initially hidden with a <code>visibility: hidden; position: absolute</code>. The issue is that if a <code>&lt;div&gt;</code> hidden this way contains a table which uses <code>border-collapse: collapse</code> and has a border set on it cells, that border still shows "through" the hidden <code>&lt;div&gt;</code> on IE.</p>
  
  <p>Try this for yourself by running the code below on IE6 or IE7. You should get a white page, but instead you will see:</p>
  
  <p><a href="http://img.skitch.com/20090110-enuxpb5aduqceush46dyuf4wk7.png">alt text http://img.skitch.com/20090110-enuxpb5aduqceush46dyuf4wk7.png</a></p>
  
  <h2>Possible workaround</h2>
  
  <p>Since this is happening on IE and not on other browsers, I assume that this is an IE bug. One workaround is to add the following code which will override the border:</p>
  
  <pre><code>.hide table tr td {
      border: none;
  }
  </code></pre>
  
  <p>I am wondering:</p>
  
  <ul>
  <li>Is this a known IE bug?</li>
  <li>Is there a more elegant solution/workaround?</li>
  </ul>
  
  <h2>The code</h2>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
          &lt;style type="text/css"&gt;
  
              /* Style for tables */
              .table tr td {
                  border: 1px solid gray;
              }
              .table {
                  border-collapse: collapse;
              }
  
              /* Class used to hide a section */
              .hide {
                  visibility: hidden;
                  position: absolute;
              }
  
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="hide"&gt;
              &lt;table class="table"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Gaga&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>