Слайдер с проблемами только в Google Chrome

Question

Я использую слайдер с 5 элементами, которые представляют собой изображения с заголовком. Используя Firefox или Safari, он работает так, как должен, но в Chrome заголовок убегает или ... я просто не могу объяснить, что происходит.

HTML

<ul>
    <li><h3><a href="example.com" class="shadow">Title</a></h3></li>
    <li><h3><a href="example.com" class="shadow">Title</a></h3></li>
    ...
</ul>

CSS

li {
    margin-right: 5px;
    width: 162px;
    height: 260px;
    display: block;
    float: left;
    position: relative;
}
.shadow {
    background-color: rgba(0,0,0,0.4);
    width: 142px;
    height: 113px;
    padding: 10px;
    position: absolute;
    top:132px;
}

Вы можете увидеть это в действии здесь . Просто нажмите на вторую ссылку с именем "projectos".

Извините за любые ошибки в моем английском, это не мой основной язык.

Заранее спасибо.

Не знаю, актуально ли это, но я использую плагин carouFredSel для слайдера.

Answer 1

Вы говорите, что используете позицию: относиться к элементам li, но в примере на странице он, кажется, не существует.

.small-list-carousel li {
    margin-right: 5px;
    width: 162px;
    height: 260px;
    display: block;
    float: left;
}

просто добавьте позицию: относительно этого стиля, и он долженвероятно, работа.