I have a border of about 10px on the top and bottom of a page I'm working on. How do I get rid of it? (It seems to be default)

can we see the page?

 

and CSS

 

body	{

margin:0;
font-family:"Times New Roman", Times, serif;
font-size:16px;
text-align:left;
vertical-align:top;
background-color: #396484;
background-repeat:repeat-x;
color:#333333;
}

a:link, a:visited	{
text-decoration:underline;
color:#336699;
}

#outer		{
background-image:url(images/helenbg_night.png);
background-repeat:repeat-x;
}

#wrapper	{
margin: 0 auto 0 auto;
width:966px;
text-align:left;

}

#container		{
background-image:url(images/helenbody_night.png);
width:966px;
height:auto;

}

#header		{
background-image:url(images/helenheader_night.png);
background-repeat:no-repeat;
width:966px;
height:275px;
}

a#headerlink	{
}

#content		{
float:left;
width:640px;

}

#sidebar		{
float:right;
width:300px;
}

.sidebar ul		{
list-style-type:none;
}



#footer		{
background-image:url(images/helenfooter_night.png);
background-repeat:no-repeat;
height:202px;
width:966px;
text-align:center;

}

have you tried a global reset?

 

* {margin:0; padding:0;}

have you tried to do a - margin i.e. -15 or somthing?

 

usualy works

Firstly; body {padding: 0px;}

 

But yeah a global reset * { margin: 0px; padding: 0px; } should sort it out.

Aha! Global reset did the trick! I will try and remember that one for the future!

What causes them? (so I can understand what has happened a bit better)

 

Thanks all for the replies

Different browsers have different margin and padding settings by default, so when you place something on a site it will automatically take on that margin or padding by default. So using a global reset is just a cheat way of telling everything on the page to by default have what ever you set that too. It gives you a bit more control over spacing, but it means now you have to set a margin and padding for everything such as the spacing between paragraphs.

aaah! I get it! Thanks

ohno! now there's one at the bottom

You'd be amazed how many times seeminly innocent elements cause these sorts of problems. Have a good look at the elements at the top and bottom of those divs.

 

Another trick is the almighty Firebug. Install that add-on (I'm assuming you use Firefox, if you don't, you'll need that too - but trust me, it's worth it) and right-click whatever's at the bottom of your page and go to Inspect Element. Firebug will show you the structure of your HTML and the CSS controlling it. What's even more handy is it highlights margins in yellow and padding in purple when you put your mouse over the tags in the HTML display, so you can instantly see what's causing the trouble

If there is now one appearing at the bottom (even after a global reset) then it is best to makign sure that the divs surrounding this 'ghost' border haven't been given a margin-top: 15px or something like that. Firebug, as suggested, is a great way of playing with the css to find out where the border's coming from