Have Geek Brain

The edge at the top that I don't want

For some reason, I am getting a space at the top of the page. Html:

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

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 are only a small amount of white space at the top, any ideas?

+2


a source to share


3 answers


Your example code is missing a closing div. You need to close <div id="topcontainer">

or <div id="main">

.

As mentioned add



margin: 0;
padding: 0;

Into your css body, as this will remove the default browser fields. Alternatively, you can use the reset stylesheet.

0


a source 


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


+7


a source


David has already answered your question, but I would like to point out what css dumps here.

There are many critics about css resets, but I prefer to use meyerweb css reset

If you continue your html the way you started, you will have a lot of unwanted computed styles and you can avoid resetting your css beforehand and continue working without ugly browser styling.

Hope this helps. Sinan.

EDIT: Main part of the 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;
}
+2


a source






More articles:


All Articles