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

Can't get rid of empty space at the top of my site

  • Hi all,

    I'm unable to get rid of the blank space before the header of the site begins:

    dev.msl.org

    Relevant segment of stylesheet below (I apologize for the long segment, but I'm really not sure where the issue is:

    body {
      margin:0px;
      padding:0px;
      font-family:Georgia, "Times New Roman", Times, serif;
      font-size:80%;
      background-image:url('images/background.jpg');
      background-repeat:no-repeat;
      background-position:top center;
      background-color:#3073b4;
    }
    h1, h2, h3, h4 {
      margin-top:0px;
    }
    h2.pagetitle {
      color:#003366;
      padding-bottom:5px;
      margin-bottom:10px;
      border-bottom:1px solid #003366;
      font-size:2em;
    }
    a {
      color:#3073b4;
      text-decoration:none;
    }
    a:hover {
      text-decoration:underline;
      color:#8C0003;
    }
    a:visited {
      color:#003366;
    }
    a:visited:hover {
      text-decoration:underline;
      color:#8C0003;
    }
    img {
      border:none;
    }
    pre {
      margin:0px;
      padding:0px;
      font-family:"Times New Roman", Times, serif;
      font-size:14px;
    }
    ul {
      list-style-position:inside;
    }
    /* Structure */
    
    #wrapper {
      width:1000px;
      margin:0px;
      padding:0px;
      margin:auto;
      position:relative;
      right:-55px;
    }
    #header {
      float:left;
      width:890px;
      margin:0px;
      padding:15px;
      padding-bottom:10px;
      background-image:url('images/msl-header-left.png');
      background-repeat:no-repeat;
      background-position:top center;
      margin-top:10px;
      margin-left:-63px;
      padding-left:150px;
      padding-top:20px;
      z-index:10;
    !important
    }
    #header h1 {
      margin:0px;
      padding:0px;
      width:100%;
      color:#FFFFFF;
      font-size:3em;
    }
    p.tagline {
      margin:0px;
      padding:0px;
      font-style:italic;
      color:#DEE7FE;
      font-size:1.7em;
      text-align:center;
    }
    .header-left {
      float:left;
      width:590px;
    }
    #header a {
      margin:0px;
      padding:0px;
      text-decoration:none;
      color:#FFFFFF;
    }
    #main {
      float:left;
      width:900px;
      margin:0px;
      padding:15px;
      padding-bottom:0px;
      background-image:url('images/body-bg.png');
      background-repeat:repeat-y;
      background-position:center;
    }
    #sidebar {
      float:right;
      width:220px;
      margin:0px;
      padding:0px;
      margin-right:15px;
      padding-left:20px;
      border-left:1px solid #999999;
    }
    #content {
      float:left;
      background-color:#FFFFFF;
      width:610px;
      padding-left:15px;
    }
    #footer {
      float:left;
      padding-right:15px;
      padding-left:15px;
      height:50px;
      width:907px;
      margin:auto;
      background-image:url('images/footer-bg.png');
      background-position:center bottom;
      background-repeat:no-repeat;
    }
    #footer-bottom {
      float:left;
      padding-right:15px;
      padding-left:15px;
      width:907px;
      margin:auto;
    }
    .footer-p {
      margin:0px;
      padding:5px;
      text-align:center;
      width:750px;
      margin:auto;
      font-size:1.2em;
      color:#FFFFFF;
    }
    .footer-p a {
      color:#FFFFFF;
      text-decoration:underline;
    }
    .footer-p a:hover {
      color:#003366;
    }
    

    Thanks to any and all who may help.

  • You have set a
    margin-top: 10px; at your #header..

  • I don't really know what you're trying to do here.. #header { float:left; width:890px; margin:0px; padding:15px; padding-bottom:10px; background-image:url('images/msl-header-left.png'); background-repeat:no-repeat; background-position:top center; margin-top:10px; margin-left:-63px; padding-left:150px; padding-top:20px; z-index:10; !important }

    First you say padding: 15px then margin: 0px and at the bottom you write margin-top: 10px; margin-left:-63px; padding-bottom:10px; padding-left:150px; padding-top:20px;

    The css will apply the last rules over the ones it reads first, so it's kind of pointless to put the first margin and padding there..

    I think it's better to remove the -top,-right,-bottom,-left rules and put them all together in one margin/padding. This way you won't make that mistake again :) So you would do padding: 20px 15px 10px 150px; and margin: 10px 0px 0px -63px; but if you want no white space on top you replace margin 10px with 0px

    The order to put the 4 together is (if I'm correct) margin: top right bottom left;

    I hope this helped you!

  • The page & header structure & CSS does seem a little odd...ll the divs etc seem to be floated left and I can't figure out why.

    Certainly removing

       margin-top: 10px; 
    

    from #header will fix the basic issue.