Fixed Height Div Tag W/ Custom Scroll Bar

[Krewe]

Hey Guys, I was wondering if anyone knew how to make it so a div tag within a table had a fixed height.I need it so if there is more content then that div's height can handle, a vertical scroll bar will appear. Second, I want to make that scroll bar similar to Facebook's.Where it only appears when you hover over that div tag, then disappears when you hover off. ThanksZach

[TheGallery]

I need it so if there is more content then that div's height can handle, a vertical scroll bar will appear.

For that, you'll have to give your element a fixed height as you said, and then use overflow: scroll; to achieve the effect you mentioned (with the vertical bar if the content is longer than the height.

Where it only appears when you hover over that div tag, then disappears when you hover off.

You'll have to use JavaScript for that. I believe jQuery has all the functions to achieve this effect. Edit: Nevermind i misunderstood your problem.

[dsonesuk]

<table class="mytable">  <tr>	<td> </td>	<td> </td>	<td> </td>  </tr>  <tr>	<td colspan="3"><div class="table_div"><div>    <p>I was wondering if anyone knew how to make it so a div tag within a table had a fixed height.I need it so if there is more content then that div's height can handle, a vertical scroll bar will appear.</p><p>Second, I want to make that scroll bar similar to Facebook's.Where it only appears when you hover over that div tag, then disappears when you hover off.</p><p>I was wondering if anyone knew how to make it so a div tag within a table had a fixed height.I need it so if there is more content then that div's height can handle, a vertical scroll bar will appear.</p><p>Second, I want to make that scroll bar similar to Facebook's.Where it only appears when you hover over that div tag, then disappears when you hover off.</p><p>I was wondering if anyone knew how to make it so a div tag within a table had a fixed height.I need it so if there is more content then that div's height can handle, a vertical scroll bar will appear.</p><p>Second, I want to make that scroll bar similar to Facebook's.Where it only appears when you hover over that div tag, then disappears when you hover off.</p></div></div> </td>  </tr>  <tr>	<td> </td>	<td> </td>	<td> </td>  </tr></table>

.mytable {border:1px solid #999; border-spacing:0; border-spacing: expression(cellSpacing=0); /*for IE*/ margin:10px auto; width:800px;}.table_div {height:200px;  width:400px; margin: 0 auto;overflow:hidden;}.table_div div {width:350px;}.table_div:hover {overflow-y:auto;}

[niche]

Christmas is early this year thanks to dsonesuk!

[Krewe]

Well Dsone...That example works perfectly alone. However when I try to convert it into my site it:1) Doesn't Work2) Ruins my text-shadow for some reason. (The Overflow is what ruins it). My Code: CSS)

@charset "utf-8";/* CSS Document */html, body{margin:0px;padding:0px;}body{font-family:Impact;color:#383838;background-color:#191919;background-image:url(../images/stripes.png);background-repeat:repeat;}/*************************************************************************Link Styles*************************************************************************/a{text-decoration:none;}a img{border:0px;}/*************************************************************************Text Styles*************************************************************************/h1{font-family:Arial;color:#000000;   text-shadow:	-1px -1px 0 #6C6C6C,	1px -1px 0 #6C6C6C,	-1px 1px 0 #6C6C6C,	1px 1px 0 #6C6C6C;margin-bottom:0px;padding-bottom:0px;}html.ie6 h1,html.ie7 h1,html.ie8 h1,html.ie9 h1{font-family:Arial;zoom: 1;background-color: #666666;color:#000000;filter: progid:DXImageTransform.Microsoft.Chroma(Color=#666666)		 progid:DXImageTransform.Microsoft.Glow(Strength=1, Color=#666666);margin-bottom:0px;padding-bottom:0px;}h1:before{content:"<";}h1:after{content:">";}/*************************************************************************Navigation Style*************************************************************************/#leftNav p.transparent {  padding:0px;  margin:0px;  font-size:15px;  line-height:17px;		/* Required for IE 5, 6, 7 */		/* ...or something to trigger hasLayout, like zoom: 1; */		width: 100%;		/* ...but not required as filter works too */		/* should come BEFORE filter */		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";		/* ... but also 5, 6, 7 */		filter: alpha(opacity=70);		/* Older than Firefox 0.9 */		-moz-opacity:0.7;		/* Safari 1.x (pre WebKit!) */		-khtml-opacity: 0.7;		/* Modern!		/* Firefox 0.9+, Safari 2?, Chrome any?		/* Opera 9+, IE 9+ */		opacity: 0.7;}#leftNav img{-moz-transition:padding 2s, -moz-transform 1s; /* Firefox 4 */-webkit-transition:padding 2s, -webkit-transform 1s; /* Safari and Chrome */-o-transition:padding 2s, -o-transform 1s; /* Opera */}#leftNav img.home{animation-delay: 2s;animation:Spin 3s;-moz-animation:Spin 3s; /* Firefox */-webkit-animation:Spin 3s; /* Safari and Chrome */}#leftNav img.about{animation-delay: 2s;-moz-animation-delay: 2s; /* Firefox */-webkit-animation-delay: 2s; /*Safari and Chrome */animation:Spin 5s;-moz-animation:Spin 5s; /* Firefox */-webkit-animation:Spin 5s; /* Safari and Chrome */}#leftNav img:hover{transform:rotate(360deg);-moz-transform:rotate(360deg); /* Firefox 4 */-webkit-transform:rotate(360deg); /* Safari and Chrome */-o-transform:rotate(360deg); /* Opera */} #leftNav{width:200px;}@keyframes Spin{0%   {transform:rotate(0deg);}50%  {transform:rotate(360deg);}100% {transform:rotate(-360deg);}}@-moz-keyframes Spin{0%   {-moz-transform:rotate(0deg);}50%  {-moz-transform:rotate(360deg);}100% {-moz-transform:rotate(-360deg);}}@-webkit-keyframes Spin{0%   {-webkit-transform:rotate(0deg);}50%  {-webkit-transform:rotate(360deg);}100% {-webkit-transform:rotate(-360deg);}}/*************************************************************************Content Style*************************************************************************/.content{padding-left:10px;padding-right:10px;max-height:500px;background-image:url(../images/contentcode.png);background-repeat:repeat-y;background-position:top right;-moz-box-shadow:inset 0 0 25px #000000;	-webkit-box-shadow:inset 0 0 25px #000000;	box-shadow:inset 0 0 25px #000000;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px; /* future proofing */-khtml-border-radius: 15px; /* for old Konqueror browsers */}

HTML)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--[if lt IE 7 ]> <html class="ie6"> <![endif]--><!--[if IE 7 ]>	<html class="ie7"> <![endif]--><!--[if IE 8 ]>	<html class="ie8"> <![endif]--><!--[if IE 9 ]>	<html class="ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Home | Code Krewe</title><link rel="stylesheet" type="text/css" href="css/default.css" /></head><body><div id="container"><table><!-- Header --><tr style="height:115px;">	 <!-- Logo -->	 <td width="100%" style="min-width:900px;">		 <img src="images/logo.png"  alt="logo"/><br />		</td>				<!-- Navigation -->		<td valign="top" width="300px" rowspan="2">			<div id="leftNav">			 <p class="transparent"><Body><br /><Div Id="Welcome">Welcome To CodeKrewe.com<⁄Div><br /><Div Class="Home"></p>				<a id="home" href="#"><img src="images/home.png" alt="home" class="home" /></a>				<p class="transparent"><⁄Div><br /><Div Class="Founded">&nbsp;Code Krewe was founded on 12⁄7⁄11. They officially opened the site for business on 1⁄1⁄12.<⁄Div><br /><Div Class="About"></p>				<a id="about" href="#"><img src="images/about.png" alt="about" class="home"/></a>				<p class="transparent"><⁄Div><br /><Div Class="Talking">Talking with the customer is essiential.<⁄Div><br /><Div Class="Portfolio"></p>				<a id="portfolio" href="#"><img src="images/portfolio.png" alt="portfolio" class="home"/></a>				<p class="transparent"><⁄Div><br /><Div Class="Trust">There must be trust between the customer and the supplier.<⁄Div><br /><Div Class="Blog"></p>				<a id="blog" href="#"><img src="images/blog.png" alt="blog" class="home"/></a>				<p class="transparent"><⁄Div><br /><Div Class="Service">You are trusting us with your product, therefore, we must provide excellent service.<⁄Div><br /><Div Class="Contact"></p>				<a id="contact" href="#"><img src="images/contact.png" alt="contact" class="home"/></a>				<p class="transparent"><⁄Div><br /><⁄Body></p>			</div>		</td>	</tr><!-- End Header --><!-- Middle -->	<tr style="height:500px; max-height:500px;">		<td valign="top" class="content">			<h1>New Client</h1>			<img src="images/line.png" height="2px" width="100%" style="margin-top:0px; padding-top:0px;" alt="line" />   Test		</td>	</tr><!-- End Middle --><tr height="200px" style="background-color:#191919;">	 <td colspan="2" width="100%">		Howdy Ho		</td>	</tr></table></div></body></html>

If you could help me input what you showed me into the content area I would appreciate it! Thanks.