Grow your CSS skills. Land your dream job.

FF inserting padding/margin at top of page

  • # January 6, 2009 at 3:51 pm

    I have a couple nested divs that should be positioned at the top of the page but for some reason EI pushes them right up there but FF does not.

    Just to make me EXTRA crazy, if I add a border around the nested div the problem solves itself (are you kidding me!?)

    The #header-bkgd div seems to be the one that won’t behave.

    Here is the code………………………………………………………………
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!–
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #EBEBEB;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
    }
    .oneColFixCtr #container {
    width: 1000px;
    background: #FFF;
    margin: 0 auto;
    }
    .oneColFixCtr #header-bkgd {
    position: relative;
    left: 0px;
    top: 0px;
    background: url(images/img-bkgd.gif) no-repeat;
    height: 417px;
    width: 1000px;
    /* border: 1px solid #ebebeb;*/
    }
    .oneColFixCtr #pos-statement {
    font-family:Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
    position: relative;
    top: 101px;
    left: 33px;
    height: 45px;
    width: 332px;
    margin-top: 30px;
    margin-left: 10px;
    }
    –>
    </style>
    </head>

    <body class="oneColFixCtr">

    <div id="container">
    <div id="header-bkgd">
    <div id="pos-statement"> AdvisorShares is an investment management firm designed to offer actively managed ETFs.</div>
    <!–end #header-bkgd –>

    <!– end #container –></div>
    <!– end #mainContent –></div>

    </body>
    </html>

    Rob
    # January 6, 2009 at 5:32 pm

    .oneColFixCtr #pos-statement { margin-top:30px; }

    is causeing the 30px gap at the top of the page, if thats what you mean? :)

    You have quite alot of stuff flying around there… If you need any help with peicing what it is you have together, post away :)

    # January 6, 2009 at 8:52 pm

    Change

    Code:
    position: relative;

    for .oneColFixCtr #pos-statement to

    Code:
    position: absolute;
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".