Home/ Questions/Q 8185585
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T01:53:59+00:00

Ive been having this issue accross a few projects im working on. im sure

  • 0

Ive been having this issue accross a few projects im working on.

im sure its a basic issue and ive tried looking for answers but to no avail.

the code for the page in its entirity is:

HTML

<html>
    <head>
    <link rel="stylesheet" href="cssbin/default.css" type="text/css">

    </head>

    <body>

        <header>
        </header>

        <nav>

        </nav>

        <section>


        </section>

        <footer>

        </footer>
    </body>
</html>

CSS:

body {
    background-color: #B3BDE6;
}

header {
    height: 200px;
    background-color: #020C36;
}

nav {
    height:100px;
    background-color: #7A8FE6;
}

section {
    height:500px;
    background-color: #2B314D;
}

footer {
    height: 200px;
    background-color: #020c36;
}

body, header, nav, section, footer {
 border: 1px solid black;
}

the webpage below shows what im talking about:

http://virtualharrogate.co.uk/template.php

in google chrome the page is framed, im not sure if this happens in every browser but i need to rectify the issue for chrome if nothing else…

Im asking why the borders there (as im obviously missing the point of something somewhere) and how to fix the issue?

ive tried styling the page with css properties width: 100%; & height: 100%; but still nothing.

thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This happens because by default body has margin:8px.

    Here is the default stylesheet – http://www.w3.org/TR/CSS21/sample.html

    Just add a margin:0; styling to correct it.

    And you should use some sort of css reset before applying custom css. Thats the right way to go about stuff.

    Check out Initializr. It offers that plus a lot more, including IE6+ compatibility/fallbacks etc.

    • 0