#slider {
	clear: both;
	margin: 0 auto;
	padding: 0 26px;
	width: 948px;                /* important to be same as image width */
	height: 320px;               /* important to be same as image height */
	position: relative;          /* important */
	overflow: hidden;            /* important */
	background-color: #f6f6e6;
}

#sliderContent {
	  width: 948px;                /* important to be same as image width or wider */
	  position: absolute;          /* important */
	  top: 0;                      /* important */
	  margin: 0;                   /* important */
	  padding: 0;
	  list-style: none outside none;
}

.sliderImage {
	  float: left;                 /* important */
	  position: relative;          /* important */
	  display: none;               /* important */
}

.sliderImage span {
	  margin: 0;
	  position: absolute;          /* important */
	  display: none;               /* important */
	  left: 0;
	  width: 908px;
	  font: normal 14px "Trebuchet MS", "Times New Roman", sans-serif;
	  padding: 15px 20px 17px 20px;
	  background-color: #000;
	  filter: alpha(opacity=60);   /* here you can set the opacity of box with text */
	  -moz-opacity: 0.6;           /* here you can set the opacity of box with text */
	  -khtml-opacity: 0.6;         /* here you can set the opacity of box with text */
	  opacity: 0.6;                /* here you can set the opacity of box with text */
	  color: #fff;
	  bottom: 0;
   /*
			if you put
			   top: 0; -> the box with text will be shown at the top of the image
			if you put
			   bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}