what is pushing banner down?

*AngelaFrench* · #1 01-20-2010, 12:24 AM

It's been forever since I've built a new css layout from scratch and right off the bat I'm stumped.

I've got a container div for my page, area (this is a mockup) and a banner div inside that. So far so good. Then I put a <p>tag in my banner div and in FF it pushed down the banner from the top of its container (creating what looks like a top margin on the banner div).

Why would that happen please?

<style type="text/css">

div#container {
width:800px;
height:500px;
border:1px solid #953A21;
margin-right:auto;
margin-left:auto;
padding-top:0;

}

div#banner {

width: 800px;
height: 100px;
background-color:#953A21;
padding:0;
margin:0;
color:#fff;

}

</style>
</head>
<body>

<div id="container">
<div id="banner">
<p style="margin:0;">test</p>
</div>

</form>
</body>

*coothead* · #2 01-20-2010, 01:32 PM

Hi there AngelaFrench,

try it like this...

Code:


<style type="text/css">
div#container {
    width:800px;
    height:500px;
    border:1px solid #953A21;
    margin:auto;
 }
div#banner {
    height:99px;
    border-top:1px solid #953a21;
    background-color:#953A21;
    color:#fff;
 }
</style>



<div id="container">
<div id="banner">
<p>test</p>
</div>
</div>

coothead

*AngelaFrench* · #3 01-20-2010, 07:40 PM

The missing </div> tag you caught was just bad cut/paste on my part. The banner is still pushed down in FF. The only way I could get it not to was to add this to my style sheet:

*
{
margin:0;
padding:0;
}

mmi · #4 01-22-2010, 10:41 AM

Here's an article that discusses this topic.

Quote:

Do not let the browser's defaults get in your way and be aware that elements can have different amounts of padding and margin as determined by the browser's own default stylesheet. It is your job to control this explicitly.