child divs not listening to parent div overflow setting

[dzhax]

So i have the following code:

<div id="console">	 <div class="consoleExpansion">		  <img src="lib/console_expand.fw.png" alt="Expand Console" title="Expand/Compress Toolbox Console" onclick="toggleConsole();" />	 </div>	 <div id="streamSize" class="toolbox">		  <label>Stream Width:</label>		  <div id="slider">			   300px			   <input id="slide" type="range" min="300" max="1920" step="5" value="450" onchange="updateSlider(this.value)" />				1920px		  </div>		  <div id="16-9">Width: 450px  Height: 253px</div>	 </div>	 <div id="layouts" class="toolbox">		  <form>			   <label>Choose A Layout:</label><br>			   <input id="singleRow" name="layout" type="radio" value="single" checked  onclick="updateChat('shown')" />Single Row with Chat<br>			   <input id="multiRow" name="layout" type="radio" value="multi" onclick="updateChat('hidden')" />Multi Row without Chat<br>		  </form>	 </div></div>

Also have the following CSS:

#console{	 display:block;	 position:absolute;	 bottom:0px;	 left:0px;	 right:0px;	 border:0px transparent hidden;	 height:102px;	 background:#003535;	 padding:10px;     overflow:hidden;} .toolbox{	 display:inline-block;	 background:dimgray;	 color:silver;	 border:2px gray solid;	 padding:5px;	 margin-right:10px;	 position:static;}.consoleExpansion{	 text-align: center;	 margin:0 0 0 0;	 top:-8px;	 position:relative;	 border:0px transparent hidden;}.consoleExpansion img{	 cursor:pointer;}

So basically its a collapsible toolbox that anchors to the bottom of the screen. Problem is when i collapse the toolbox I am setting the height of the #console to 5px but the different toolboxes are not following the overflow:hidden setting. They are just moving down below the screen and remain visible (I know this because a scroll bar shows up and you can scroll down and see the items). Its almost as if they are not recognizing they are children of #console. If you would like a visual example you can see the live site at www.watchtbr.com/multi.php the toolbox is expanded by clicking on the silver/gray image in the bottom center of the screen. It is set to toggle the div height with the following code:

var consoleVisibility = null;function toggleConsole(){	 if(consoleVisibility == 'shown'){		  $('#console').css('height', '5px');		  consoleVisibility = 'hidden';	 } else if(consoleVisibility =='hidden') {		  $('#console').css('height', '102px');		  consoleVisibility = 'shown';	 } else {		  $('#console').css('height', '5px');		  consoleVisibility = 'hidden';	 }}

any help is much appreciated.

Edited March 29, 2013 by dzhax

[dsonesuk]

??? works fine for me.

[dzhax]

yea. my webserver must not of been updating. because its working now. Sorry.