How can I keep text from overlapping?

I had this same issue - I don't know if the cause is the code or my sites css but I have a bit of a work around try testing the option to "Make the slide window height fit the largest slide:" to "No" then you should see a fluctuating height issue but check that the overlap is gone - mine did. What I then did was in my styles I put a height for the container in this case .view-id-tickerblock with overflow: hidden; to stop the fluctuation.

I did all this and then the overlap appeared again so all I did is switch back the "..slide window height.." to Yes and it went away.

Note initially this problem was only evident in Firefox on a mac with safari not showing the issue, after I did the work around the problem seems avoided on FF Safari Mac - and windows IE6/7/8.

Let me know if this works for you or you have another solution.

hi,
i am also facing the same problem. I hav created a vertical scroll which displays 4items in a slide, when i click on 'next' button then the next slide elements appear over the previous slide elements. i.e the slide elements overlap one over the other...help me if anyone hav the same issue, i am using view 6.x-2.x-dev.

Anyone have a site to look at?

issues solved,

Now everything working fine for me...goto ur view slideshow settings..click on the gare button in the right site of ur "style: slideshow" option and when you scroll down you can find "Advanced Options:" ,there i have entered: "requeueOnImageNotLoaded: true" . Make sure u remove the double quote jand just enter the text.

Having this same issue but in Views Slideshow version 7.x-3.0. (Screen shot attached for an example). I have 4 articles up per slide. I have tried turning 'Make slide window height fit largest slide' on and off...off usually results in the slide completely collapsing.

I have the Advanced Option of slideResize set to 0 for jQuery Cycle Custom Options. This fixed the now 'overlapping text/slide' to be shoved down during the transition causing the page to resize in the middle.

I have the following css setup to fix an issue with the row not resizing properly after the initial page load
.views-slideshow-cycle-main-frame {
position: relative !important;
width: 100% !important;
}

But the text from the next slide still overlaps during the transition. I can get it to cooperate by removing the css, but then I sacrifice the responsive portion - which I'm not willing to do - It must be responsive.

Seems like this issue is still outstanding..?

After doing battle with it for sometime, the core of the issue appears to be a lack of width on the initial slide. On page load, the first slide's inline styles are as follows:

position: absolute; top: 0px; left: 0px; display: block; z-index: 8; opacity: 1;

After the transition and any time the slide is revisited the inline styles are as follows:

position: absolute; top: 0px; left: -756px; display: none; z-index: 8; opacity: 1; width: 756px; height: 86px;

Looks like the width (and height) calculation doesn't occur until the first slide's transition. A simple style like

.views-row-1 {
  width: 100%;
}

Was enough, so far, to fix it for me.

Was experiencing the same issue. #8 solved it for me. Thanks!

re-open if any experience issue with 7.x-3.2+