Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Help! with annoying spacing error with html/css

H

haydn!

macrumors 65816
Original poster
Nov 10, 2008
1,288
1,874
UK
Hi, I'm really struggling to identify the cause of a spacing error with the menu on this site.

I've checked, and checked the CSS and HTML and all looks fine. Just need someone with a fresh pair of eyes to see if I'm missing something.

http://area84.haydnjames.co.uk

The menu items should sit flush with the top of the page, with just the orange trim overlapping into the white (when hovered over with the mouse).

Thanks in advance! H
 
haydn! said:
Hi, I'm really struggling to identify the cause of a spacing error with the menu on this site.

I've checked, and checked the CSS and HTML and all looks fine. Just need someone with a fresh pair of eyes to see if I'm missing something.

http://area84.haydnjames.co.uk

The menu items should sit flush with the top of the page, with just the orange trim overlapping into the white (when hovered over with the mouse).

Thanks in advance! H
Click to expand...

Hi, I'm looking on an iPad so can't see the source...so I'll just guess...

Have you tried setting margin/padding = 0 on the elements?
 
Hermes Monster said:
Hi, I'm looking on an iPad so can't see the source...so I'll just guess...

Have you tried setting margin/padding = 0 on the elements?
Click to expand...

Yeah, where required. Some of the elements require padding because of the way the buttons are built.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles_main.css" />
<title>Haydn James</title>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/external.js"></script>

</head>

<body>

	<div id="wrapper">
		<div id="header">
			<div id="logo">
				<img src="images/logo.png" alt="" />
			</div>
			
			<div id="menu">
				<div class="menu-button">

				<ul>
					<li><a href="#"><img src="images/navigation/mywork.png" alt="My Work" /></a></li>
					<li><a href="#"><img src="images/navigation/whatido.png" alt="What I Do" /></a></li>
					<li><a href="#"><img src="images/navigation/getintouch.png" alt="Get in Touch" /></a></li>							
				</ul>
				
				</div>
			</div>
		
		</div>
		
		<div id="page">
			
			<div class="billboard">
				<img src="images/billboard-hellothere.png" alt="" />
				<h1>A secondary heading will go here.</h1>
			</div>
			
			<div class="clear"></div>
		
		</div>
	</div>

</body>
</html>

And the CSS...

HTML: 
/*
STYLE SHEET FOR HKMS - www.hkms.co.uk
Created by Haydn James - www.haydnjames.co.uk
Copyright 2010 - all rights reserved.

*/

body {
	background-color: #FFF;
	background-image: url('images/windowbackground.png');
	background-repeat: repeat-x;
	margin:0px;
	}
	
h1 {font-size: 26px; color: #ff7814; font-family: "Myriad Pro"; font-weight: normal; margin: 0 0 20px 0; }
h2 {font-size: 22px; color: #0B1A39; font-family: "Trebuchet MS"; font-weight: bold; margin: 0 0 10px 0; }
h3 {font-size: 20px; color: #0B1A39; font-family: "Trebuchet MS"; font-weight: bold; margin: 0 0 5px 0; }
h4 {font-size: 18px; color: #9A9AC0; font-family: "Trebuchet MS"; font-weight: bold; margin: 20px 0 0 0; }
h5 {font-size: 17px; color: #FFFFFF; font-family: "Trebuchet MS"; font-weight: bold; margin: 0 0 10px 0; }
h6 {font-size: 14px; color: #9A9AC0; font-family: "Trebuchet MS"; font-weight: bold; margin: 0; }

p {margin: 0 0 10px 0;}

/********************************************/
/*		PAGE LAYOUT							*/
/********************************************/

	#wrapper {
		width: 840px;
		margin: auto;
		font-family: "myriad pro";
		font-size: 14px;
		-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
		color: #3C3C3C;
	}

	#header {
		width: 840px;
		height: 110px;
		margin: 0 0 20px 0;
	}
		
	#menu {
		float: left;
		height: 75px;
		margin: 0 10px 0 20px;
		width: 540px;
		text-align: right;
	}
		
	#logo {
		float: left;
		width: 200px;
		height: 40px;
		padding: 40px 20px 20px 20px;
		background-image: url('images/background-logo.png');
		background-position: bottom;
		margin: 0 5px;
		}	
	
	#page {
		float: left;
		width: 840px;
		margin: 20px 0 20px 0;
		padding: 0px;
		}

	#footer {
		width: 870px;
		padding: 0 15px;
		margin: 30px 0 30px 0;
		border-top: 1px solid #AEAECD;
		font-size: 11px;
		background-color: #FFFFFF;
		color: #9A9AC0;
		}

/********************************************/
/*		CONTENT LAYOUT SEGMENTS				*/
/********************************************/

	.billboard {
		float:left;
		width: 810px;
		margin: 50px 15px 70px 15px;
	}


	.feature {
		float: left;
		width: 250px;
		margin: 20px 15px;
	}
	
	
	img	{border:none}


		
/********************************************/
/*		CONTENT ELEMENT FORMAT				*/
/********************************************/

	.clear {clear: both;}

/********************************************/
/*		Inline Navigation					*/
/********************************************/

	.menu-button {
		color: #fff;
		text-decoration: none;
		height: 20px;
		vertical-align: center;
		padding: 42px 15px 8px 15px;
		margin:0 5px;
		}
	
	.menu-button a, .menu-button a:visited {
		color: #fff;
		text-decoration: none;
		height: 20px;
		vertical-align: center;
		padding: 42px 15px 8px 15px;
		margin: 0 5px;
		}

	.menu-button a:hover, .menu-button a:active {
		color: #fff;
		text-decoration: none;
		height: 20px;
		vertical-align: center;
		padding: 42px 15px 8px 15px;
		margin: 0 5px;
		background-image: url('images/background-menubutton.png');
		border-bottom: 5px solid #ff7814;
		}

	.menu-button ul {
		list-style: none;
		display: inline;
		vertical-align: middle;
		}

	.menu-button li {
		display: inline;
		}


	a:link, a:visited {
		color: #9A9AC0;
		text-decoration: none;
		}

	a:hover, a:active {
		color: #9A9AC0;
		text-decoration: underline;
		}
 
The main piece is the image tag. Add the following two pieces.
Code: 
img {
 ...
 vertical-align:top;
}
.menu-button a:hover, .menu-button a:active {
 ...
 padding: 42px 15px [COLOR="Red"]14px[/COLOR];
}
 
angelwatt said:
The main piece is the image tag. Add the following two pieces.
Code: 
img {
 ...
 vertical-align:top;
}
.menu-button a:hover, .menu-button a:active {
 ...
 padding: 42px 15px [COLOR="Red"]14px[/COLOR];
}
Click to expand...


Nice one. That works, but how? The padding/margin's now don't add up to the space available. Is it just some quirky browser rendering or, am I totally missing something.
 
haydn! said:
Nice one. That works, but how? The padding/margin's now don't add up to the space available. Is it just some quirky browser rendering or, am I totally missing something.
Click to expand...

The height properties set to 20px that you have set don't really do anything. Using Firebug, when I turn them off nothing really changes. You can also use the Layout tab to see how space is really being utilized around each tag. It should help clear things up some.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back