CODEWITHSUNDEEP
htmlcss
Shawn Taylor
Shawn Taylor

Reputation: 3969

background image doesn't position at top left

I am scratching my head that why I need to put

padding-top: 1px; under #pageHeader identifier to get background image at top left set at #container otherwise it displays few pixels below from top.

Even If I put padding-top : 0; it doesn't work.

Moreover it also works if I put it under #intro OR I remove h1 tag inside pageheader div.

My CSS file

html 
    {
        margin: 0;
        padding: 0;             

    }
body 
    { 
        font: 75% georgia, sans-serif;
        line-height: 1.95;
        color: #555753;         
        background: #fff url(../images/bottom.gif) no-repeat bottom right; 
        margin: 0; 
        padding: 0;
    }
#container 
    { 
        background: url(../images/bg.gif) no-repeat left top; 
        padding: 0 175px 0 110px;  
        margin: 0; 
        position: relative;
    }   
#intro 
    { 
        min-width: 470px;
        width: 100%;
    }
#pageHeader 
    {
        padding-top: 1px;   
        height: 87px;
    }

My HTML file looks like

<div id="container">
<div id="intro">
<div id="pageHeader">
<h1>Hello World!</h1>   
</div>
</div>
</div>

Edit~~ Its html and body.. actually in my code but I was messed up with editor while pasting here.

Upvotes: 1

Views: 751

Answers (2)

Gary Lindahl
Gary Lindahl

Reputation: 5363

You can have all the details of default styling at http://www.w3.org/TR/CSS2/sample.html

Upvotes: 1

Cito
Cito

Reputation: 5613

The phenomenon you're observing here is called "collapsing margins". The h1 element has a certain margin. This collapses with the margins of the outer divs, so the pageHeader div is shifted down. By setting a non-zero padding to the pageHeader div, you prevent the margins from collapsing.

See the W3C specs, if you read carefully they say:

"Two margins are adjoining if and only if: ... no padding ... separate them"

The rules also say:

"When two or more margins collapse, the resulting margin width is the maximum of the collapsing margins' widths."

So the effect is that your outer divs which have top margins of 0 actually acquire the top margin of the h1 element which is the maximum of all the top margins.

Upvotes: 3

Related Questions