Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Body-tag not at the top of the page

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 27, 2014 at 5:16 am #173822
    kryt
    Participant

    What am I doing wrong?
    In this small exampel I cant get the body tag at the top of the page.
    You can see it here: http://wasteofspace.dk/version5/

    Here is my html:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
    <title>CSS help :-)</title>
    <link rel=”stylesheet” href=”css/style.css” />
    </head>

    <body style="height:100%;background:orange;">
    <div style="height:100%;background:lightblue;width:50%">
        <div>
            <h1>Inside your Danalock box</h1>
        </div>                      
    </div>
</body>

    </html>

    And css:
    html, body{margin:0;padding:0;height:100%;}

    June 27, 2014 at 5:19 am #173823
    Ed
    Participant

    The browser is applying a margin-top to your h1 tag which pushes your body down, because margins apply outside their container.

    Margins are weird like that.

    June 27, 2014 at 5:22 am #173824
    Paulie_D
    Member

    Headings and many other elements have built in margins.

    If you remove the margin from the h1 that will solve it.

    h1 {
margin:0;
}

    I often use a universal reset which includes:

    *   {
margin:0;
padding:0;
}

    You can find this is many reset.css offerings on the webz.

    June 27, 2014 at 5:43 am #173828
    kryt
    Participant

    Your code works fine in my first little exampel, but if you have time it would help me a lot if you kan take a look at this.
    http://wasteofspace.dk/version6/Danalock%20user%20guide.html
    Her I still get it wrong

    /Kate

    June 27, 2014 at 6:03 am #173831
    Ed
    Participant

    What exactly is not behaving as anticipated in the above link?

    If you’re talking about your green heading not being at the top of the document, it’s because you’ve got padding applied to it which is, well, adding padding!

    You can change that rule to padding: 0 0 20px; and it’ll just pad the bottom.

    June 29, 2014 at 12:27 am #174022
    kryt
    Participant

    Hey Ed

    No it is not the padding at the green headding.
    I set the body to be height:100%; and still I can scroll the page.
    Why is that?

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.