SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Braveheart4's Avatar
    Join Date
    Nov 2005
    Location
    Macedonia
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Overflow hidden not working in IE 7.0

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

    Code HTML4Strict:
    <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:

    Code 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?
    Author at GraphicRiver

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Addict Braveheart4's Avatar
    Join Date
    Nov 2005
    Location
    Macedonia
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok then this is how it's supposed to be , and this is the odd behavior in IE 7.
    Author at GraphicRiver

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,792
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Try adding position:relative to .slides-container {}


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •