CODEWITHSUNDEEP
htmlcss
sark9012
sark9012

Reputation: 5737

margin at the top that i dont want

For some reason, I am getting a gap at the top of the page. The html:

<body>
   <div id="main">
    <div id="topcontainer">
    <div id="topmenu">
    asdasdsa
    </div>
</div>

The css:

body
{
background-color:#FFF;
font-family:Arial, Helvetica, sans-serif;
}

#main
{
width: 1024px;
margin: 0 auto 0 auto;
}

#topcontainer
{
height: 80px;
}

#topmenu
{
height:40px;
background-image:url('../siteimages/topmenu.jpg');
}

#secondmenu
{
height:40px;
}

There is just a small amount of white space at the top, any ideas?

Upvotes: 2

Views: 150

Answers (3)

Sinan
Sinan

Reputation: 11563

David has already answered your question but i'd like to point out css resets here.

There are a lot of critics about css resets but i prefer to use meyerweb's css reset

If you continue to your html with the way you started you'll have a lot of unwanted computed styles and to avoid that you can reset your css in advance and continue working without ugly browser styling.

Hope it helps. Sinan.

EDIT: Main part of mentioned css

/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

Upvotes: 2

David Yell
David Yell

Reputation: 11855

Your example code has a missing closing div. You'll want to close <div id="topcontainer"> or <div id="main">.

As mentioned add,

margin: 0;
padding: 0;

To your body css, as this will remove the default browser margins. Alternatively use a reset style sheet.

Upvotes: 0

Quentin
Quentin

Reputation: 943518

body, div { margin: 0; padding: 0; }

Upvotes: 7

Related Questions