I have a problem with banners so far and it is making me pull my hair out and I am hoping i will get the solution here. When I put more than 1 banner module on a page (let's say 3 banners), it seems all 3 show with the same size (witdth) even if all three have different sizes on the module options.
What might be the problem here?
example:
this is the code of the banner:
<div class=" jcarousel-skin-tango"><div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;"><div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;"><ul id="mycarousel1714" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 486px;">
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none; width: 243px;">
<img src="/images/ibertex.jpg" alt="Info 1" width="1150" height="60">
</li>
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" jcarouselindex="2" style="float: left; list-style: none; width: 243px;">
<img src="/images/voip-10.JPG" alt="info 2" width="1150" height="60">
</li>
</ul></div><div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="disabled"></div><div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div></div></div>
Edit:
I am by the way using caroussel banners, and this is the css file:
/**
* This <div> element is wrapped by jCarousel around the list
* and has the classname "jcarousel-container".
*/
.jcarousel-container {
position: relative;
}
.jcarousel-container li{
margin-left:0;
}
.jcarousel-clip {
z-index: 2;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
}
.jcarousel-list {
z-index: 1;
overflow: hidden;
position: relative;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.jcarousel-item {
float: left;
list-style: none;
/* We set the width/height explicitly. No width/height causes infinite loops. */
width: 454px;
height:auto;
overflow: hidden;
}
/**
* The buttons are added dynamically by jCarousel before
* the <ul> list (inside the <div> described above) and
* have the classnames "jcarousel-next" and "jcarousel-prev".
*/
.jcarousel-next {
z-index: 3;
display: none;
}
.jcarousel-prev {
z-index: 3;
display: none;
}
.jcarousel-item a {
padding: 0!important;
}
.jcarousel-item a:hover
{background: none!important;
}
The width is set to width: 454px; but the default that showed earlier was :
<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none; width: 243px;">
If i change the width on that css file, will it work?