treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

FF inserting padding/margin at top of page

  • friendtodogs
    Permalink to comment #
    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>
  • Robskiwarrior
    Permalink to comment #
    .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 :)
  • iopet
    Permalink to comment #
    Change 
    position: relative;
    for .oneColFixCtr #pos-statement to
    position: absolute;
Add a Comment