Question

I’m using a slider with 5 items, which are images with a title over it. Using Firefox or Safari it works the way it should but in Chrome, well, the title runs away or… I just can’t explain what happens.

The 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>

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

You can see it in action here. Just click the second link named “projectos”.

Sorry for any errors in my english, it’s not my primary language.

Thanks in advance.

Don’t know if it’s relevant, but I’m using carouFredSel plugin for the slider.

Answer 1

You’re saying you are using position:relateve for li elements but in the example you page it doesn’t seem to exist.

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

just add position:relative to this style and it should probably work.