Hey,

I am pretty new to CSS and am a little stuck.
I am building a fluid website, and wanted a nice fluid content slider that would shrink and resize with the page.

I found FlexSlider which is great, but it's giving me some trouble. I am setting it up to have a slide animation, which requires that I add an extra div container with a overflow:hidden attr. This doesn't seem to be working

Here is an image
http://imageshack.us/photo/my-images...entslider.png/

All the overflow:hidden seems to be doing is cutting off the slider circles that slide along with the images.

Here is the current css styling for it.


Code:
.flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flexslider-container{
	zoom: 1;
	position: relative;
	overflow: hidden;
}

/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption {width: 96%; padding: 2%; margin: 0; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;}

/* Direction Nav */
.flex-direction-nav { height: 0; }
.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em;}
.flex-direction-nav li .next {background-position: -52px 0; right: -21px;}
.flex-direction-nav li .prev {left: -20px;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(bg_control_nav.png) no-repeat; cursor: pointer; text-indent: -999em;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
And the HTML
Code:
      <div id="container">
		<h2>FlexSlider Demo - <a href="http://flex.madebymufffin.com">Visit the homepage for documentation details</a></h2>
		

		<div class="flexslider-container">
			<div class="flexslider">
		    <ul class="slides">
		    	<li>
		    		<img src="inacup_samoa.jpg" />
		    		<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
		    	</li>
		    	<li>
		    		<a href="#"><img src="inacup_pumpkin.jpg" /></a>
		    		<p class="flex-caption">This image is wrapped in a link!</p>
		    	</li>
		    	<li>
		    		<img src="inacup_donut.jpg" />
		    	</li>
		    	<li>
		    		<img src="inacup_vanilla.jpg" />
		    	</li>
		    </ul>
		  </div>
	 	</div>

	</div>
Dreamweaver is giving me a "Expanding Box Problem" on the flex-caption class and a "Unscrollable Content Bug" on the li tags wrapping the captioned images. So I'm guessing the main issue lies there, I'm just not exactly sure how to resolve it.

Thanks to anyone who can help