CSS Forum

**Ashkwil** · 10-23-2010, 04:01 PM

Hey im looking for some help, if you visit www.bodyworkspersonaltraining.co.uk/old/forum
you can see a big gap between the navbar and the login box, im guessing its down to something in the css but I cant find out what is wrong!

Heres my CSS
www.bodyworkspersonaltraining.co.uk/mycss.css

Thanks in advance =)

**moatist** · 10-23-2010, 04:26 PM

I think the culprit is your #page-body margin.

Code:

#page-body {
	margin: 40px 20px;
	clear: both;
}

Try changing it to "margin: 0 20px 40px 20px".

**Ashkwil** · 10-25-2010, 05:04 PM

Ok that worked the gap is perfect however when logged in the gap changes and is smaller, heres HTML for the top of the page when logged in...

HTML Code:

<!--
	phpBB style name: X-Silver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:	  Alpha Trion ( http://www.skin-lab.com/ )	
 
	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->
 
<script type="text/javascript"> 
// <![CDATA[
	var jump_page = 'Enter the page number you wish to go to:';
	var on_page = '';
	var per_page = '';
	var base_url = '';
	var style_cookie = 'phpBBstyle';
	var style_cookie_settings = '; path=/; domain=.englishmuscle.co.uk';
	var onload_functions = new Array();
	var onunload_functions = new Array();
 
	
	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}
 
	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}
 
	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	}
 
// ]]>
</script>
<script type="text/javascript" src="./styles/X_Silver/template/styleswitcher.js"></script>
<script type="text/javascript" src="./styles/X_Silver/template/forum_fn.js"></script>
 
<link href="./styles/X_Silver/theme/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="./style.php?sid=b89b17e7b407ce11676ce1fe750bb0a1&amp;id=10&amp;lang=en" rel="stylesheet" type="text/css" media="screen, projection" />
 
<link href="./styles/X_Silver/theme/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="./styles/X_Silver/theme/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="./styles/X_Silver/theme/large.css" rel="alternate stylesheet" type="text/css" title="A++" />
 
 
</head>
 
<body id="phpbb" class="section-index ltr">
 
								<center><a href="./index.php?sid=b89b17e7b407ce11676ce1fe750bb0a1" title="Board index" id="logo"><img src="./styles/X_Silver/imageset/site_logo.png" width="1000" height="100" alt="" title="" /></a></center>
			
						
<!-- NEW NAV -->
<div id="nav_back" >
 
 
			
 
			<center>
 
			<a class="nav_buttons" href="./index.php?sid=b89b17e7b407ce11676ce1fe750bb0a1"><img src="./styles/X_Silver/theme/images/nav_home.png" border="0" alt="" /></a>
 
			
			<a class="nav_buttons" href="./ucp.php?sid=b89b17e7b407ce11676ce1fe750bb0a1"><img src="./styles/X_Silver/theme/images/nav_user_cp.png" border="0" alt="" /></a>
 
			
			<a class="nav_buttons" href="./search.php?search_id=active_topics&amp;sid=b89b17e7b407ce11676ce1fe750bb0a1"><img src="./styles/X_Silver/theme/images/nav_active.png"  border="0" alt="" /></a>
 
			<a class="nav_buttons" href="./memberlist.php?sid=b89b17e7b407ce11676ce1fe750bb0a1"><img src="./styles/X_Silver/theme/images/nav_members.png"  border="0" alt="" /></a>
 
			<a class="nav_buttons" href="./search.php?sid=b89b17e7b407ce11676ce1fe750bb0a1" rel="nofollow"><img src="./styles/X_Silver/theme/images/nav_search.png" border="0" alt="" /></a>
 
			<a class="nav_buttons" href="./faq.php?sid=b89b17e7b407ce11676ce1fe750bb0a1"><img src="./styles/X_Silver/theme/images/nav_faq.png" border="0" alt="" /></a>
 
 
<a class="nav_buttons" href="./ucp.php?i=pm&amp;folder=inbox&amp;sid=b89b17e7b407ce11676ce1fe750bb0a1"><img src="./styles/X_Silver/theme/images/nav_pms.png" border="0" alt="" /></a>
 
<a class="nav_buttons" href="./ucp.php?mode=logout&amp;sid=b89b17e7b407ce11676ce1fe750bb0a1"><img src="./styles/X_Silver/theme/images/nav_logout.png" border="0" alt="" /></a>
 
 
			</center>
</div>
 
				<div id="page-body">
					<div class="c-h-l"><div class="c-h-r"><div class="c-h-c"><div class="c-h-title">			Bodyworks Member Chat
		</div></div></div></div>	 <div class="sub-left"><div class="sub-right">
			<h3>Recent Activity</h3>
		</div></div>
<div class="v-left"><div class="v-right">
	<script type="text/javascript">

</DIV>
Obviously the CSS is the same as what you have me, thanks for the help so far

</DIV>

**moatist** · 08:32 PM

Your images c-h-l.png, c-h-r.png, and c-h-c.png each have transparent whitespace above their visible sections. Crop this out and your spacing issue will be solved.

http://www.bodyworkspersonaltraining...ages/c-h-c.png