CODEWITHSUNDEEP
htmlcss
Matthew
Matthew

Reputation: 461

Gap At The Top Of Basic Webpage?

I've setup a simple webpage, and there is a weird gap at the top which I don't know how to fix. Other sites I've developed haven't had this issue at all..?

Here's my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>sitename</title>
<link rel="stylesheet"  type="text/css" href="main.css">
</head>

<body>
<div id="wrapper">      
    lorem ipsum
</div>
</body>
</html>

And the CSS:

body {
background-color:#323232;
}

#wrapper {
width:960px;
margin:0pt auto;
background-color:#272727;
}

And here's a pic of the weird gap:

http://dl.dropbox.com/u/46018476/TEMP/gap.png

Is this just my version of FireFox acting up temporarily or am I doing something obviously wrong?

Upvotes: 3

Views: 157

Answers (4)

doyoe
doyoe

Reputation: 302

Because the body tag default margin, and you need to reset it, such as: 

body {
    margin: 0;
}

Upvotes: 2

Paul D. Waite
Paul D. Waite

Reputation: 98846

I think by default browsers do tend to add margin or padding to either the <html> or <body> element, I can never remember which.

Edit: as per other answers and comments (e.g. Rahool’s), looks like it’s margin on <body>.

So this should sort out your issue:

body {
    margin: 0;
}

Upvotes: 3

rahool
rahool

Reputation: 639

For every page, each web browser uses a set of default styles before any other css styles are applied.

Mozilla default style sheet

Internet Explorer User Agent Style Sheets

You will need to reset the styles applied by these default css.

Firefox applies default 8px margin to body element. To reset it,

body {
    margin: 0;
}

Upvotes: 2

siannone
siannone

Reputation: 6763

Try adding

*{
    margin: 0px;
    padding: 0px;
}

Upvotes: 1

Related Questions