I have a problem to set the front page slideshow working correctly without using some css hacks.

I made a view with title and image field. The last one has custom style settings for the slideshow. All images have same width and height. 1000px 185px.

The problem, and I dont where does it come from (Views or Field slideshow), is that the automatic css from the module (or js libraries) is generating some strange padding-bottom of 6px, only on the first frame. On the other frames, this value is 0. So there's an offset in the slideshow. To prevent this, I have to add this line to my css file:

.field-slideshow-1 {
padding-bottom: 0px!important;
}

Any suggestion for this error???

Comments

Anonymous’s picture

I'm having the same problem, 6 pixels at the bottom, but I haven't been able to fix it with css yet. It's driving me nuts.

Awesome_ian’s picture

Same problem, but this is not a padding.
The parent's div of image has 5px height more.
As you can see, my image height is 430px and parent 435px... why ?!?

<div class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-4 views_slideshow_cycle_hidden views-row-even" id="views_slideshow_cycle_div_diaporama-block_3" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 4; opacity: 0; width: 1020px; height: 435px;
  <div class="views-slideshow-cycle-main-frame-row-item views-row views-row-0 views-row-first views-row-odd">
    <div class="slide-img"><a href="/node/6"><img width="1020" height="430" alt="" src="http://le-far.fr/sites/default/files/styles/diaporama/public/actu1slide.jpg" typeof="foaf:Image"></a></div>
</div>

My solution was to give the image height to the slideshow block:

height:430px;
overflow:hidden;
NickDickinsonWilde’s picture

Issue summary: View changes
Status: Active » Closed (outdated)

re-open if still an issue