Blockquotes to display on top of div - css

Question

I am having some difficulty with a blockquote element to display on top of a div I have created as my image slider. I have included a fiddle so you can see what i see.
My demo
Here is the code:
<div>
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<img src="http://www.pressrecord.com.au/wp-content/uploads/2013/02/example.png" alt="">
<div id="main-body-wrapper">
<p class="caption" style="position:absolute;">
<span class="captionspan">
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
<cite>Somebody famous</cite>
</blockquote>
</span></p>
</div>
</li>
<li>
<img src="http://www.pressrecord.com.au/wp-content/uploads/2013/02/example.png" alt="">
<div id="main-body-wrapper">
<p class="caption" style="position:absolute;">
<span class="captionspan"></span>
</p>
</div>
</li>
<li>
<img src="img/nurseriesbig.jpg" alt="">
<div id="main-body-wrapper">
<p class="caption" style="position:absolute;">
<span class="captionspan"></span>
</p>
</div>
</li>
<li><img src="http://www.pressrecord.com.au/wp-content/uploads/2013/02/example.png" alt="">
<div id="main-body-wrapper">
<p class="caption" style="position:absolute;">
<span class="captionspan"></span>
</p>
</div>
</li>
</ul>
</div>
</div>

Answer 1

Here Fiddle: http://jsfiddle.net/Anee/s673j/1/
Add this to css:
blockquote {
position:absolute;
}
blockquote:after{
content: "\201D";
margin-right: -2.75em;
}
Not sure, why you have p class caption in the middle. you might want to remove it.