Having Some Issues With Positioning.

[jblack]

Essentially what's going on is I've created 2 drop down menus and the drop down menu with the most items pushes the content I want to put in the body of my table down. I've thrown various things at it and am yet to succeed in correcting this problem. I've read around and, though I may be totally off, what I understand is that the z-index of the parent element is affecting this. I am at a loss as of now and have finally come to ask the question.

 

 

 

Here's what I've got for you:

		<style>				body {			background-color: #000000;			color: #8c8c8c;			margin: 0;		}		table.main {			background-color: #0a0a0a;			border: 0px;			padding: 0px;			width: 960px;			height: 100%;			border-spacing: 0px;		}		td.banner {			height: 175px;		}		td.navbg {			background-image: url("images/ccNavBG.gif");			height: 32px;		}		table.nav {			border: 0px;			padding: 0px;			border-spacing: 0px;			margin-left: auto;			margin-right: auto;			position: relative;		}		.dropMenu {			background-color: #0a0a0a;			width: 98px;			visibility: hidden;			z-index: 5;			color: 8c8c8c;			border-left: 1px solid #141414;			border-right: 1px solid #141414;			border-bottom: 1px solid #141414;			display: block;			position: absolute;		}		a {			text-decoration: none;		}		table.adminBar {			position: fixed;			z-index: 3;			right: -128px;			width: 160px;			height: 192px; 			padding: 0px; 			border-spacing: 0px;			top: 25% 		}		td.adminBarBG {			width: 32px;			background-image: url("http://crimsoncourt.hollosite.com/design2/images/adminBarBG.gif");			background-repeat: repeat-y; 		} 		td.adminNav { 			background-color: #0a0a0a; 			width: 128px; 		} 		span.adminHead {  			text-align: center;  			width: 128px;   			padding: 0px;			font-size: 110%;			  		}  		ul.adminFunc { 			list-style-type: none;			padding: 0px;  		}		table.content {			padding: 0px;			width: 900px;		}		span.contentHeader {			margin-left: 32px;			width: 300px;			font-size: xx-large;		}		table.container {			border: 1px solid #8c8c8c;			border-radius: 10px;			position: relative;			z-index: 1;		}		td.news {			width: 350px;			padding: 32px;			height: 200px;		}		td.poll {			width: 200px;			padding: 32px;		} 		span.tags {			font-size: x-small;		}		 		</style>

And the HTML:

<table class="main" align="center">			<tr>				<td class="banner"><img src="images/ccBanner.gif"/></td>			</tr>			<tr>				<td class="navbg" align="center">										<table class="nav">						<tr>							<td><a href="index.php"><img src="images/navHome.gif" /></a></td>														<td onmouseover="menuShow(1)" onmouseout="menuHide(1)" style="position: relative;"><a href="clan.php"><img src="images/navClan.gif" /></a>															<table class="dropMenu" id="1">									<tr>										<td><a href="clan.php?action=about">About</a></td>									</tr> 									<tr> 										<td><a href="clan.php?action=members">Members</a></td>									</tr>  									<tr>										<td><a href="clan.php?action=mypage">My Page</a></td> 									</tr>  									<tr> 										<td><a href="clan.php?action=myfiles">My Files</a></td> 									</tr>  									<tr> 										<td><a href="clan.php?action=rules">Rules</a></td>									</tr> 								</table>							 							</td>							 							<td onmouseover="menuShow(2)" onmouseout="menuHide(2)" style="position: relative;"><a href="events.php?action=current"><img src="images/navEvents.gif" /></a>												 										<table class="dropMenu" id="2"> 									<tr>										<td>- <a href="events.php?action=new">New</a></td>									</tr>									<tr>										<td>- <a href="events.php?action=current">Current</a></td>									</tr>									<tr>										<td>- <a href="events.php?action=auction">Auctions</a></td>									</tr>								</table>															</td>														<td><a href="chat.php"><img src="images/navChat.gif" /></a></td>														<td><a href="forums/"><img src="images/navForums.gif" /></a></td>														<td><a href="games.php"><img src="images/navGames.gif" /></a></td>														<td><a href="contact.php"><img src="images/navContact.gif" /></a></td>														<td><a href="gallery.php"><img src="images/navGallery.gif" /></a></td>						</tr>					</table>								</td>			</tr>			<tr><td>			       here is where all the content is pushed down				<table class="content" align="center">					<tr>						<td><span class="contentHeader">News</span></td>					</tr>					<tr>					<td>					<table class="container"> 						<tr>						<td class="news">							<b>Update: Site Status</b><br />							<span class="tags">Posted 11/14/2013</span><br /><br />							Content going in here						</td>						<td class="poll">                                                         stuff going in here						</td>						<td class="news">                                                          stuff going in here						</td>					</tr>					</td>					</table>				</table>							</td></tr>		</table>

[davej]

Well, add these two dotted borders and then decide what you want to happen here...

td.banner {height: 175px;border:1px dotted #fff;}td.navbg {background-image: url("images/ccNavBG.gif");height: 32px;border:1px dotted #ccc;}

[jblack]

Well, I fixed it through other means, cleaned up a lot of junk that was lying around from numerous failed attempts. In the end I changed to using <div> and <span> and cleared everything up.

[davej]

I never could see it so I never understood what spacing was considered to be the problem.

[jblack]

The solution was to set the parent element containing the drop down menu to position: relative and then use left: 0 on the .dropMenu class. In the HTML above I denoted where everything was pushed down.