title: In Chrome, my text is hidden behind my background image
body: <p><a href="http://codepopper.com/leon/health/" rel="nofollow">http://codepopper.com/leon/health/</a></p>
  
  <p>Hello! Hoping for some help on this... If you view the link above in FireFox you will be able to see the text in each of the green rows. However in Chrome for some reason the text is hidden behind, I've played with the Z-index, but is there something else I'm missing?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!-- Video Row 1 --&gt;
  &lt;div class="row"&gt;
      &lt;img src="images/thumb1.png" alt="Top five tips, facts, myths, and heartburn treatments."/&gt;
      &lt;div class="copyBox"&gt;
          Top five tips, facts, myths, and heartburn treatments.
              &lt;img class="float_right" src="images/play_button.png" /&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.row {
      float:left;
      width:300px;
      height: 60px;
      background: url(../images/tile_row.jpg) repeat-x;
      clear: none;
      z-index: -1;
  }
  
  .copyBox {
      float:right;
      text-align: left;
      width: 192px;
      height: 60px;
      font-family: arial;
      font-size: 12;
      left: 5px;
      top: 5px;
      z-index: 1;
  }
  </code></pre>