HTML Text Error in jQuery SlideShow - php

Question

I have been working on a slideshow for my school website, you can see that here. Although the text that appears under the photo, the two lines are two closed together, and the css that I have used hasn't worked.
The CSS is:
#slider {
width: 1047px; /* important to be same as image width */
height: 350px; /* important to be same as image height */
max-height: 350px;
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 1047px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 16px/16px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 1047px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 20px;
}
p.sliderDesc{
padding-top: 5px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0;
left: 0;
}
ul { list-style-type: none;}
And the HTML for the slider is:
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<img src="slider_images/image1-5.jpg" alt="1" /><!--Image Courtesy Of Wikipedia | http://upload.wikimedia.org/wikipedia/commons/e/e1/Little_Rock_Central_High_School.jpg-->
<span class="bottom"><strong>Welcome to Beautiful Little Rock Central High! </strong><br />Content text...</span>
</li>
<li class="sliderImage">
<img src="slider_images/image2.jpg" alt="2" />
<span class="bottom"><strong>National Historic Site & Museum</strong><br /BLAH!!!</span>
</li>
<li class="sliderImage">
<img src="slider_images/image3-5.jpg" alt="3" />
<span class="bottom"><strong>No state shall make or enforce any law which shall abridge the privileges or immunities of citizens of the United States.</strong><br />Fourteenth Amendment </span>
</li>
<li class="sliderImage">
<img src="slider_images/image4-5.jpg" alt="4" />
<span class="bottom"><strong>Title text 2</strong>
<br />
<p class="sliderDesc">Content text...</p>
</span>
</li>
<!--<li class="sliderImage">
<img src="slider_images/410/5.jpg" alt="5" />
<span class="bottom"><strong>Title text 2</strong><br />Content text...</span>
</li>-->
<div class="clear sliderImage"></div>
</ul>
</div>
<!-- // slider -->
Thanks! I hope this is a simple fix. Thanks.

Answer 1

Okay I found the solution to this problem, apparently the quick and easy solution is to make a class that I called "sliderDesc" and I used it in this way:
<span class="bottom"><strong>National Historic Site & Museum</strong><br /><p class="sliderDesc">Content text...</p></span>
And that resulted in this: lrch.harrisonbh.com