Grow your CSS skills. Land your dream job.

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

  • # February 12, 2013 at 12:11 am

    Hi all,

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

    [dev.msl.org](http://dev.msl.org “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.

    # February 12, 2013 at 12:36 am

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

    # February 12, 2013 at 4:15 am

    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!

    # February 12, 2013 at 7:48 am

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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