0

Hi guys and gals,

I'm in the process of developing a responsive website and have run into something which I was not expecting. I have all my margins and padding set to 0 (or at least I thought I did). However, when I place anything into the header, it automatically pushes whitespace on to the top. In other words, when I add the unordered list below, several pixels of white show up all the way across the top of the browser.

Here's my HTML:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <div class="container">
        <header class="head">
            <nav>
                <ul>
                    <li>Philosophy</li>
                    <li>Services</li>
                    <li>Pricing</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
        <!-- / HEADER -->

        <section class="philosophy"></section>
        <!-- / PHILOSOPHY -->

        <section class="services"></section>
        <!-- / SERVICES -->

        <section class="pricing"></section>
        <!-- / PRICING -->

        <section class="contact"></section>
        <!-- / CONTACT -->

        <footer class="foot"></footer>
    </div>

</body>
</html>

And here is my CSS:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    position: relative;
}

.container {
    background-color: rgb(0, 0 ,0);
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.head {
    background: rgb(0, 255, 0);
    width: 100%;
    height: 25em;
    margin: 0;
    padding: 0;
}

.head p {
    margin: 0;
    padding: 1em;
}

.philosophy {
    background: gray;
    width: 100%;
    height: 25em;
}

.services {
    background: blue;
    width: 100%;
    height: 25em;
}

.pricing {
    background: green;
    width: 100%;
    height: 25em;
}

.contact {
    background: yellow;
    width: 100%;
    height: 25em;
}

.foot {
    background: red;
    width: 100%;
    height: 25em;
}

Any help would be greatly appreciated.

2
Contributors
4
Replies
19
Views
4 Years
Discussion Span
Last Post by webmeat
0

Thank you iamthwee! That is a handy little web app. I appreciate you pointing it out.

0

Great stuff please mark as solved.

Also, don't forget to include the doctype as well for Internet explorer. But I always use a css reset to ensure the websites have maximum compatibility across browsers.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.