title: 1px undesignated border between vertical divs in Chrome
body: <p>There's a lot of code here, and I'm not sure what's causing it. The site in question is www.wearedeja.com</p>
  
  <p>When viewing the page in Chrome there is a 1px border between each row of divs on top of each other -  notice that the mouse will flash from the index finger(designating a clickable link) to the arrow when moving the mouse vertically, and if you try hard enough you can hover your mouse right between the divs. This doesn't happen horizontally. I don't want a single pixel on this site not clickable, and I've tried everything I can think of to remove it. In Firefox this doesn't happen at all(I know the text is messed up in FF.. working on that too)</p>
  
  <p>On a select few spaces this doesn't happen. This should lead to reproducible results but I can't seem to figure it out. I believe it's either something to do with the lowest level divs or the text...</p>
  
  <p>Here's the relevant code</p>
  
  <p><strong>HTML STRUCTURE</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="row"&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;div id="row"&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;   
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;div id="row"&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;div id="row"&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;div id="text"&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    #text{
      opacity:1;
      display:table;
      position:absolute;
      z-index:999;
      color:#fff;
      text-align:center;
      width:100%;
      top:44%;
      left:0;
      }
  
  /* table rules */
      .container{
      display:table-row;
      width:100%;
      }
  
      .row{
      display:table-row;
      width:100%;
      }
  
      .cell{
      vertical-align: top;
      position:relative;
      display:table-cell;
      background-color:black;
      width:700px;
      height:auto;
      }
  
      body{
      margin:0;
      padding:0;
      }
  
          /* image rules */
      img{
      max-height:600px;
      max-width:600px;
      height:auto;
      width:100%;
      }
  </code></pre>
  
  <p>If you know what's causing this, please try to explain why this doesn't happen in FF so I can avoid it in the future... Thanks</p>