CODEWITHSUNDEEP
htmlcss
max_
max_

Reputation: 24481

Gap between image borders at the top of the page html

I am trying to position an image to be at the top of the page and stretching to both sides of the page with a height of 51px. However, there is a gap between the image and the top of the page and both sides of the page. Please can you tell me what I am doing wrong?

#background {
width: 100%; 
height: 100%; 
position: absolute; 
left: 0px; 
top: 0px; 
z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}
#twitter {
    background: url(http://maxk.me/test/img/twitterbg.png) repeat;
    height: 51px;
    width: 100%;
    position: fixed;
}

HTML

<html>
    <head>
        <title>title</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <div id="background">
            <img src="...." class="stretch" alt="" />
        </div>
        <div id="twitter">

        </div>
       </body>
</html>

Upvotes: 0

Views: 1014

Answers (1)

thirtydot
thirtydot

Reputation: 228162

You need to remove the default margin on body:

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

You should also add a valid doctype as the very first line:

<!DOCTYPE html>

Without this, your page will be very broken in Internet Explorer, and generally inconsistent between different browsers.

Upvotes: 2

Related Questions