Overflow:scroll issue

HTML & CSS
1

Hi there,

I’m building a website for a client and I’m getting slightly strange results with overflow-y:scroll.

The place I need the scroll is on the work page. This is the only page which actually overflows the containing div. On all other pages, I get a scroll bar that doesn’t actually scroll. My understanding is that scroll bars only appear if the content extends beyond the height (or width) of the div.

I’ve got a test page up to take a look if needed.

Into the Green Design

Obviously all the HTML and CSS will be available there, but I’ll include it here for completeness:

HTML:


<a id="left-arrow" href="contact.html"></a>
	<a id="right-arrow" href="services.html"></a>
	<div id="slash"></div>
	<div id="wrapper">
		<div id="content">
			<h1>Into the Green Design</h1>
			<ul id="links">
				<li><a href="/ITG/">home</a></li> /
				<li><a href="services.html">services</a></li> /
				<li><a href="work.html">work</a></li> /
				<li><a href="contact.html">contact</a></li>
			</ul>
	
			<div id="services">
				<h3>Our Services</h3>
					<p>Graphic design, web design,<br>
					brand development,<br>
					content management systems<br>
					&amp; online marketing<p>
			</div>
	
			<h3>Recent Work</h3>
			<ul>
				<li><img src="vid.png"></li>
				<li><img src="vid.png"></li>
				<li><img src="vid.png"></li>
			</ul>
		</div>
		<div id="fade"></div>
	</div>
	<div id="footer">
		<ul>
			<li><a>home</a></li> /
			<li><a>services</a></li> /
			<li><a>work</a></li> /
			<li><a>contact</a></li> .
			<li>copyright 2011 perfect sense design</li>
		</ul>
	</div>

CSS:


#wrapper{
	overflow:hidden;
	height:500px;
	position:relative;
}

#content{
	width:586px;
	height:450px;
	overflow-y:scroll;
	margin:auto;
	text-align:left;
	padding-top:50px;
	position:relative;
}

#footer{
	width:566px;
	margin:auto;
	padding-top:170px;
	background:url('images/logo.png') no-repeat center 30%;
}

Any help is, as always, much appreciated.

Best,
Mike

2

You’d have to check this in all browsers, but I’d use overflow: auto instead.

3

If you use the value “scroll” then that forces a scrollbar whether one is needed or not although it will be grayed out slightly if it is not active.

If you use the value"auto" then the scrollbar only appears when it is required to scroll content. If the content doesn’t need to scroll then the scrollbar is not visible.

4

Thanks guys, that’s exactly what I was looking for.

Best,
Mike