I am working on a JQuery carousel that is displaying correctly, but I want to make a small adjustment to the content:
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="float: left; list-style: none outside none; position: relative; overflow: auto;" jcarouselindex="1"><img width="331" height="155" src="images/tmp/saying1.png" alt="image description here" title="image description here"><ul class="carousel-caption"><li class="item">Harry Potter and the Deathly Hallows</li><li class="text">Harry Potter video lorem ipsum dolor</li></ul></li>
Specifically, I want the carousel-caption ul to be positioned 10px to the left, but when I apply margin-left: -10px; it ends up appearing below a white space area?
CSS for the parent li element:
element.style {
float: left;
list-style: none outside none;
overflow: auto;
}
.jcarousel-skin-brag-small .jcarousel-item-horizontal {
margin: 0 0 0 63px;
padding-right: 100px;
}
.jcarousel-skin-brag-small .jcarousel-item {
height: 235px;
overflow: hidden;
width: 331px;
}
.carousel-caption {
display: inline-block;
font-size: 11px;
margin-left: -10px;
margin-top: 8px;
}
Any suggestions on how to fix this issue? Would appreciate any help!
Check out the image for reference: