Help! with annoying spacing error with html/css

Discussion in 'Web Design and Development' started by haydn!, Sep 11, 2010.

  1. haydn! macrumors 6502a

    Joined:
    Nov 10, 2008
    Location:
    UK
    #1
    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
     
  2. Hermes Monster macrumors 6502a

    Hermes Monster

    Joined:
    May 4, 2010
    Location:
    UK
    #2
    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?
     
  3. haydn! thread starter macrumors 6502a

    Joined:
    Nov 10, 2008
    Location:
    UK
    #3
    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;
    		}
    
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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];
    }
     
  5. haydn! thread starter macrumors 6502a

    Joined:
    Nov 10, 2008
    Location:
    UK
    #5

    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.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    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.
     
  7. haydn! thread starter macrumors 6502a

    Joined:
    Nov 10, 2008
    Location:
    UK
  8. Hermes Monster macrumors 6502a

    Hermes Monster

    Joined:
    May 4, 2010
    Location:
    UK
    #8
    using firebug or safaris developer tools will help massively, allow you to turn things on and off or edit them without having to worry about screwing up your CSS
     

Share This Page