I've got a trouble in css and jcarousel lite

Question

I had this HTML code like that:

<ul>
<li>
<div class="Items">
<div class="WrapImage">
<div class="caption-right">
<span class="icon1"></span>
<a class="time" href="">4:03</a>
</div>
<div class="Images">
<img src="/images/images/rightColumnImg.gif" />
</div>
</div>
<div class="text">
<a href="">A good clips you should click to see</a>
<p>20.000 visitors</p>
</div>
</div>
</li>
<li>..with the same content.</li>
</ul>

and my css like this

.caption-right
{
    width:102px;
    height:18px;
    background:transparent;
    position:absolute;
    z-index:100;
    margin: 44px 0 0 0;
}

.Topview-Items .Topview-Items-Item .WrapImage{
    width:104px;
    height:64px;
    border:#dadada 1px solid;
}
.Topview-Items .Topview-Items-Item .Images{
    width:102px;
    height:62px;
    padding:1px;
    overflow:hidden;
}
.Topview-Items .Topview-Items-Item img{
    width:100px;
    height:60px;
    border:none;
}

and here it is my css code for wrap class and images, and when I change attribute position:absolute to position:relative in the caption-right class, the caption appeared but not an images. I just want to show the caption of video clip's time above this images of clip. It works fine in Firefox and Chrome but not in IE. Some one had the problem please show me how to fix this bug.

Thank you very much!

Answer 1

Make sure your relative container (maybe Items or WrapImage) has a width, atleast at first to check if that is the problem. Most IE problems i run into is usually because something is missing a width.

hasLayout is good to know about when trying to solve IE issues hasLayout or the specific section is here Relatively positioned elements