[SOLVED] Collapsed Menu

[ptolomea]

Not quite sure where to put this as my code is part html, js, css which just happen to be 3 different sections here, but I think the main issue is in the HTML section.

 

I already have the code for the menu to collapse and open up the problem is when it is collapsed it is not meeting up with other menus.  There is a gap in between the 2 menus.

 

I was expecting a small gap between the menus but not a gap this big, I have exhausted my ideas as to why this is happening but nothing has seemed to work

 

Thanks for any help you are able to give.

 

see it in action at

http://www.resultsmayvary.org

 

and now for the code

 

CSS File

.mH {color:#60c; cursor:pointer;  font-weight:bold; border-top:0px solid #300;}
.mO {margin-left:10px; display:block;}

#leftcol div.moduletable h3 {
margin: 0 0 0 0px;
padding-left: 30px;
padding-top: 3px;
font-size: 13px;
font-weight: bold;
background: url(/images/leftMenu-button-on.gif) no-repeat top left;
height: 23px;
color: #d0a701;
}
div.moduleleft h3 {
margin-top: 0px;
padding-left: 30px;
padding-top: 3px;
font-size: 13px;
font-weight: bold;
background: url('/images/leftMenu-cont-top.gif') no-repeat top left; 
height: 22px;
color: #d0a701;
text-align:left;

}
//Left and right section this is the image that is shown when the modules are collapsed
div.moduleleft {
margin-left: 30px !important;margin-left: 15px; 
padding: 0;
float: left;
width: 100%;
background: url(/images/leftMenu-cont-left-right.gif) repeat-y top left;  
font-weight: bold;
text-align:left;

}
div.moduleleft div {
padding: 0;
background: url(/images/leftMenu-cont-bottom.png) no-repeat 10% 100%; 

}

 

Menu.php  contains everything related to my menu

<div id="leftcol">
<div class="moduleleft">
	<h3 class='mH' onClick="toggleMenu('mainMenu')">Menu</h3>
	<div id='mainMenu'>
		<table>
			<tr>
				<td>
					<ul id='transMenu'>
						<li><a href='http://www.resultsmayvary.org'  class='mainlevel'><span>Home</span></a></li>
						<li><a id='guildInfo' class='mainlevel'><span>Guild</span></a></li>
					</ul>
				</td>
			</tr>
		</table>
	</div>
</div>
<div class="moduleleft">
	<h3 class='mH' onClick="toggleMenu('other')">Somthing else</h3>
	<div id='other'>
		<table>
			<tr>
				<td>
					<ul>
						<li>1</li>
						<li>2</li>
					</ul>
				</td>
			</tr>
		</table>
	</div>
</div>
<div class="moduleleft">
	<h3 class='mH' onClick="toggleMenu('resources')">Game Resoruces</h3>
	<div id='resources'>
		<table>
			<tr>
				<td>
					<ul id='transMenu'>
						<li><a id='warhammer' class='mainlevel'><span>Warhammer</span></a></li>
						<li><a id='warcraft' class='mainlevel'><span>Warcraft</span></a></li>
					<ul>
				</td>
			</tr>
		</table>
	</div>
</div>
</div>

 

JS function that opens and closes menu

function toggleMenu(objID) {
if (!document.getElementById) return;
	var ob = document.getElementById(objID).style;
	ob.display = (ob.display == 'block')?'none': 'block';
}

 

 

[ptolomea]

Fixed it

 

needed some margin changes and position movement

div.moduleleft {
margin-left: 30px !important;margin-left: 15px; 
margin-top: -15px;
padding: 0;
float: left;
width: 100%;
background: url(/images/leftMenu-cont-left-right.gif) repeat-y top left;  
font-weight: bold;
text-align:left;
position: relative;
top:15px;

}

div.moduleleft div {
/*margin-top: -10%;*/
padding: 0;
background: url(/images/leftMenu-cont-bottom.png) no-repeat 10% 100%; 
margin-bottom:15px;

}