How to get these absolute positioned <p> to not stack like this at start?

HTML & CSS
1

hi

Im making a website and on the startpage i have a slider with testemonials from clients. The paragraphs in the slider is absolute positioned so that i could vertically center them. The thing is at the start untill the first fade/slide they are stacked on top of each other and this looks like **** of course.

site: www.rosens-bygg.se

the code for the slides look something like this:

<div class="slides">
<li>
<p>textextext</p>
</li>
<li>
<p>textextext</p>
</li>
</div>

.slides{
position: relative;
}

li{
position: absolute;
display: table;
left: 0;
top: 0;
height: 200px;
}

p{
display: table-cell;
vertical-align: middle;
text-align: center;
}
2

The question isn’t clear enough. I don’t see anything sliding.

3

Maby i was unclear, i meant fading not sliding. The gray box to the right of the dummytext on the startpage. The text is stacking on top of each other.

EDIT: solved it, just had to give the <li> a background color.