html - In Chrome, my text is hidden behind my background image -

http://codepopper.com/leon/health/

hello! hoping on this... if view link above in firefox able see text in each of green rows. in chrome reason text hidden behind, i've played z-index, there else i'm missing?

html:

<!-- video row 1 --> <div class="row">     <img src="images/thumb1.png" alt="top 5 tips, facts, myths, , heartburn treatments."/>     <div class="copybox">         top 5 tips, facts, myths, , heartburn treatments.             <img class="float_right" src="images/play_button.png" />     </div>  </div> 

css:

.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; } 

you'll need decrease width on .copybox ~190px. text getting pushed out of container. also, can remove z-index since works on positioned elements , should specify units font-size :)