php - HTML Text Error in jQuery SlideShow -

php - HTML Text Error in jQuery SlideShow -

i have been working on slideshow school website, can see here. although text appears under photo, 2 lines 2 closed together, , css have used hasn't worked.

the css is:

#slider { width: 1047px; /* of import same image width */ height: 350px; /* of import same image height */ max-height: 350px; position: relative; /* of import */ overflow: hidden; /* of import */ } #slidercontent { width: 1047px; /* of import same 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 html slider is:

<div id="slider"> <ul id="slidercontent"> <li class="sliderimage"> <a href=""><img src="slider_images/image1-5.jpg" alt="1" /></a><!--image courtesy of wikipedia | http://upload.wikimedia.org/wikipedia/commons/e/e1/little_rock_central_high_school.jpg--> <span class="bottom"><strong>welcome beautiful little stone central high! </strong><br />content text...</span> </li> <li class="sliderimage"> <a href=""><img src="slider_images/image2.jpg" alt="2" /></a> <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 create or enforce law shall abridge privileges or immunities of citizens of 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! hope simple fix. thanks.

okay found solution problem, apparently quick , easy solution create class called "sliderdesc" , used in way:

<span class="bottom"><strong>national historic site & museum</strong><br /><p class="sliderdesc">content text...</p></span>

and resulted in this: lrch.harrisonbh.com

php jquery html css