div not ecpanding with content

[M.O.S. Studios]

hey guys,

 

  I thought i was figuring out this css stuff but now one again i lernt i am not

 

2 problems:

 

1. the <div class='center' > tag stays the same size regarless of content, my content is not showing up even if i do overflow:visible;

 

2. my scroll bars are not change color at all, i know this never works on ff or safari, but it usaly does on ie

 

here is the css

 

<style type='text/css'>

body{
border-width:0px;
padding:0px;
margin:0px;
font-size:90%;
width:100%;
height:100%;
scrollbar-base-color: #DA1B1B;
scrollbar-arrow-color: #000000;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #2D2400;
scrollbar-face-color: #DA1B1B;
scrollbar-highlight-color: #DA1B1B;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #DA1B1B;
}

.header{
width:640px;
height:186px;
clear:both;
float:none;
position:relative;
}

.center{
width:900px;
height:100%;
left: auto;
clear:both;
float:none;
overflow:visible;
position:relative;
background: #000000 url(../../images/background/contentbg.png);
background-repeat: repeat-y;
}

.center #content{
width:800px;
height:760px;
left: auto;
clear:both;
float:none;
overflow:hidden;
position:relative;
text-align: left;
}

.center  #menu{
height:75px;
text-align: center;
font-family: Comic Sans MS, san sarif, Arial;
font-size: 30px;
font-weight:heavy;
font-color:#ffffff;
}

.center #menu a{color: #FFFFFF;}
.center #menu a:hover{color: #DA1B1B;}
.center #menu a:visited{color: #FFFFFF;}
.center #menu a:active{color: #DA1B1B;}


.footer{
width:900px;
left: auto;
clear:both;
float:none;
position:relative;
}

.bottom{
clear:both;
width:100%;
height:100%;
float:left;
position:relative;
background: url(../../images/background/citywhite.png);
background-repeat: repeat-x;
}
</style>

 

here is the html

 

<div class="bottom" align=center>
    <div class="header"><img src='images/background/logo.png'></div>

    <div class="center" align=center>	
<div id='menu'> <a href='index.php'>Home</a>  <a href='index.php'>Merchandise</a>  <a href='index.php?page=custom&file=2'>Media</a>  <a href='index.php?page=custom&file=7'>Contact</a> </div>
<div id='content'>
<div class='video-title'>
<acronym title="Red Avenger makes a new friend after escaping from the clutches of an angry hill billy."><p>A Taste For P.P.</p></acronym>
<table width='100%'>
	<tr width='100%'>
 		<td width='50%'>
			<div class='video-subtitle'>SEASON: 1</div>
		</td>
		<td width='50%'>
			<div class='video-subtitle'>EPISODE: 4</div>
		</td>
	</tr>
</table>
</div>

<table width='100%'>
<tr width='100%'>
	<td width='100%' align='center'>

	<div id="player">This text will be replaced</div>
	</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Playlist

<center>
	<div class='video-playlist'>
	<img src='admin/upload/episodes/ra.gif'><br><a href='index.php?page=custom&file=2&epi=4&sea=1'>A Taste For P.P.'</a><br><br>		<img src='admin/upload/episodes/Hero1.jpg'><br><a href='index.php?page=custom&file=2&epi=5&sea=1'>Hero For Hire I / V'</a><br><br>		<img src='admin/upload/episodes/Hero2.jpg'><br><a href='index.php?page=custom&file=2&epi=6&sea=1'>Hero For Hire II / V'</a><br><br>		<img src='admin/upload/episodes/Hero3.jpg'><br><a href='index.php?page=custom&file=2&epi=7&sea=1'>Hero For Hire III / V'</a><br><br>		<img src='admin/upload/episodes/Hero4.jpg'><br><a href='index.php?page=custom&file=2&epi=8&sea=1'>Hero For Hire IV / V'</a><br><br>		</div>
</center>

</div>
    </div>

    <div class="footer"></div>
</div> 

 

thanks in advance any ideas help

[M.O.S. Studios]

i feel silly about that, i forgot to change the size in .center #content{}

 

how ever im still havinge problems with the scrollbars

[Goafer]

I think this is the problem:

Since you've included the scrollbar properties in the body {} section, those properties apply themselves to the browser bars.

To change the scrollbars within your content you need to put them in .center #content {}.

Also: I'd have thought that instead of using the overflow:hidden property in the .center/.center #content sections, you could use height:auto;