Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

margin/Spacing between header and navigation

How do I remove it?

5:27 am on Jun 15, 2010 (gmt 0)

New User

5+ Year Member

joined:June 15, 2010
posts: 1
votes: 0

I'm creating a website and a margin/spacing has appeared between the header and the navigation bar. I've tried setting the margin to 0 and that doesn't fix it. Does anyone know how I can fix it?

This is the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Looerro Minis Home Page</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />


<div id="wrap"> <!-- This is the div that holds everything together. The whole layout is based inside this div -->

<div id="header"> <img src="trialhorse.jpg"alt="Looerro Miniature Horses Logo- Exceeding Expectations"/> <!-- This is where the header image goes. -->

</div> <!-- This closes the header div -->

<div id="navbar">
<li><a href="index.html">Home</a></li>
<li><a href="horses.html">Horses</a>
<li><a href="stallions.html">Stallions</a></li>
<li><a href="mares.html">Mares</a></li>
<li><a href="geldings.html">Geldings</a></li>
<li><a href="foals.html">Foals</a></li>
<li><a href="showteam.html">Show Team</a></li>
<li><a href="showresults.html">Show Results</a></li>
<li><a href="training.html">Training</a></li>
<li><a href="sales.html">Sales</a></li>
<li><a href="contactus.html">Contact Us</a></li>


<div class="cushycms" id="maincontent"> <!-- This is the maincontent div, this is where the important information will go -->
<center><h2>Welcome to</h2></center>
<center><h2>Looerro Miniature Horses</h2></center>

<p><center>Currently Under Construction. Please come back soon</center></p>


<div id="footer"> <!-- This is the start of the footer div -->
<p>&copy; 2010 All Rights Reserved</p>

</div> <!-- This is the end of the footer div -->

</div> <!-- This is the end of the wrap div -->


This is the CSS

@charset "utf-8";
/* CSS Document */

html {
font-family: Arial, Verdana, sans-serif;


h2 {
font-family:Verdana, Arial, sans-serif;


#wrap {
width:950px; /* This is the width of the wrap */
margin:0 auto; /* This is set to auto so that the layout will be centered */
background: #000000; /* This sets the background colour of the wrap */


#header {

border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-top:1px solid #FFF;


#navbar {
font-family: Edwardian Script ITC, Verdana, Arial, sans-serif;

#navbar li {
list-style: none;
float: left;

#navbar li a {
display: block;
padding: 7px 8px;
background-color: white;
color: black;
text-decoration: none;

#navbar li ul {
display: none;
width: 5em; /* Width to help Opera out */
background-color: white;}

#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: white;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color:#FFC; }

#maincontent {
float:right; /* The float left is so that the main div will float to the left. This will make the main and sidebar div
float side by side */
padding:10px; /* This is the padding around the text so that it looks spaced out and even. */
background: #000000; /* This is the background colour of the main div */
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-bottom:1px solid #FFF;


p {

#footer {

Any help would be appreciated!

8:50 am on June 15, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member dreamcatcher is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 30, 2003
votes: 0

Have you tried setting the margin/padding to 0 on the ul tag?

ul {

9:01 am on June 15, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:June 30, 2009
votes: 0

By default, web browsers apply all kinds of styling to elements by default, usually minor things like padding, margin and line-height etc.. In this case I'd bet that there is margin on the
div#navbar ul
. Try setting the margin to 0px on the
and see if it fixes it.

As a best practice you should write a block of styles listing all default html elements and setting their margin and padding to 0px, you can take it further and define a standard for fonts, a weight for bolds, line-heights etc.. This will basically remove all of the styling a browser may apply by default, it also evens the playing field across all browsers making it a little easier to write code that will display consistently on different platforms. If you don't fancy writing your own, search for "reset css", there's most likely many good examples.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members