Overflow hidden not working in IE 7.0

HTML & CSS
1

I managed to create an HTML/CSS code for a slider for featured movies. So here is my HTML:

<div id="movie-covers">
	<div class="slides-container clearfix">
							
		<div class="slide">
			<img src="img/movies/movie-cover.jpg" alt="Movie Title" />
			<a href="#" class="btn-cool-big btn-trailer">Watch trailer</a>
			<div class="overlay">
				<h2>Movie Tilte</h2>
				<p>Description of the actual movie goes here...</p>
			</div>
		</div>

		<div class="slide">
			...
		</div>

		<div class="slide">
			...
		</div>

		<div class="slide">
			...
		</div>

		<div class="slide">
			...
		</div>
	
	</div><!-- #slides-container -->
</div><!-- end #movie-covers -->

<ul id="movie-titles">
	<li><a href="#"><big>Movie Title</big><small>Genre</small></a></li>
	<li><a href="#"><big>Movie Title</big><small>Genre</small></a></li>
	<li><a href="#"><big>Movie Title</big><small>Genre</small></a></li>
	<li><a href="#"><big>Movie Title</big><small>Genre</small></a></li>
	<li><a href="#"><big>Movie Title</big><small>Genre</small></a></li>
</ul>

And the CSS:

#movie-covers {
	float: left;
	overflow: hidden;
	width: 650px;
	background: #222;
	height: 310px;
	border-right: 10px solid #000;
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-radius: 0px 10px 10px 0px;
	border-radius: 0px 10px 10px 0px;
}

.slides-container {
	width: 3250px;
	height: 310px;
}

.slide {
	position: relative;
	width: 650px;
	height: 310px;
	overflow: hidden;
}

.slide img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	clip: rect(0px, 660px, 310px, 0px); /* Still not working in IE7. Need to find a solution! */
	z-index: 20;
}

.slide a.btn-trailer {
	position: absolute;
	top: 42%;
	left: 32%;
	z-index: 50;
}

.slide .overlay {
	position: absolute;
	bottom: 0;
	left: 0px;
	width: 620px;
	padding: 15px;
	background: #222;
	background: rgba(0, 0, 0, 0.75);
	color: #CCC;
	z-index: 30;
}

.overlay h2 { font-size: 30px; color: #FFF; }
.overlay p { margin: 0px; line-height: 1.3; }

#movie-titles {
	float: right;
	margin: 10px 0px;
	padding: 10px 0px;
	width: 305px;
	background: #222;
}

#movie-titles li {
	padding: 0px 10px;
}

#movie-titles li a {
	display: block;
	padding: 12px 15px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#movie-titles li a:hover { background: #161616; }

#movie-titles li a big {
	display: block;
	color: #ABBDC6;
	font-weight: bold;
}

#movie-titles li a small {
	font-size: 11px;
	color: #666;
}

It seems everything works fine, well except the “overflow” property at #movie-covers on IE 7.0. I wonder am I missing something? :scratch:

2

I’m unable to copy the code and replicate it right now due to me being at work, so can you explain what other browsers are doing (non IE7) and w hat IE7 is doing? Screenshots would be perfect but a description will suffice as well if you can’t screenshot.

3

Ok then this is how it’s supposed to be , and this is [URL=“http://dl.dropbox.com/u/22445233/slides-notworking.jpg”]the odd behavior in IE 7.

4

Try adding position:relative to .slides-container {}