В Chrome мой текст скрыт за фоновым изображением - PullRequest
2 голосов
/ 30 апреля 2011

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

Привет!Надеемся на некоторую помощь в этом ... Если вы посмотрите ссылку выше в FireFox, вы сможете увидеть текст в каждой из зеленых строк.Однако в Chrome по какой-то причине текст скрыт, я поиграл с Z-индексом, но что-то еще мне не хватает?

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

1 Ответ

3 голосов
/ 30 апреля 2011

Вам нужно уменьшить ширину .copyBox до ~ 190px. Текст выталкивается из контейнера. Кроме того, вы можете удалить z-index, так как он работает только с позиционированными элементами, и вы должны указать единицы измерения для вашего размера шрифта:)

...