CODEWITHSUNDEEP
htmlcssimagegoogle-chromebackground-image
Leon Gaban
Leon Gaban

Reputation: 39018

In Chrome, my text is hidden behind my background image

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

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?

HTML:

<!-- Video Row 1 -->
<div class="row">
    <img src="images/thumb1.png" alt="Top five tips, facts, myths, and heartburn treatments."/>
    <div class="copyBox">
        Top five tips, facts, myths, and 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;
}

Upvotes: 2

Views: 1685

Answers (1)

imjared
imjared

Reputation: 20554

You'll need to decrease the width on .copyBox to ~190px. The text is getting pushed out of the container. Also, you can remove the z-index since it only works on positioned elements and you should specify units for your font-size :)

Upvotes: 3

Related Questions