Grow your CSS skills. Land your dream job.

Gap between Nav bar and top of page

  • # October 30, 2012 at 12:45 pm

    *sigh* I’ve tried everything i know, but between the top of my navigation bar and the top of the page is a tiny gap. It’s driving be absolutely up the wall. I do all my own HTML and CSS, and i’m still learning. Any ideas, anyone?

    Here’s the CSS:


    html{
    margin-top:0;
    padding:0;
    }

    body{
    color:#ffffff;
    background:url('background.png');
    background-size:100%;
    font-family:"Comic Sans MS";
    margin:0;
    height:100%;
    width:100%;
    background-attachment:fixed;

    }

    nav {
    width: 100%;
    }

    nav ul {
    width:100%;
    background: #efefef;
    background: linear-gradient(top, #e0e0e0 0%, #686868 100%);
    background: -moz-linear-gradient(top, #e0e0e0 0%, #686868 100%);
    background: -webkit-linear-gradient(top, #e0e0e0 0%, #686868 100%);
    box-shadow: 0px 0px 9px rgba(255,255,255,0.15);
    padding: 0 20px;
    margin-top:none;
    list-style: none;
    position: relative;
    display: inline-table;
    font-family: "Times New Roman";
    }

    nav ul:after {
    content: ""; clear:both; display:block;
    }

    nav ul ul {
    display: none;
    }

    nav ul li:hover > ul {
    display: block;
    }
    nav ul li{
    float: left;
    }

    nav ul li:hover{
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    }

    nav ul li:hover a{
    color:#fff;
    }

    nav ul li a{
    display: block;
    padding: 25px 40px;
    color: #d8d8d8;
    text-decoration: none;
    }

    nav ul ul{
    background: #5f6975;
    border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
    width: 15%
    }

    nav ul ul li{
    float:none;
    border-top:1px solid #6b727c;
    border-bottom:1px solid #575f6a;
    position: relative;
    }

    nav ul ul li a{
    padding: 15px 40px;
    color:d8d8d8;
    }

    nav ul ul li a:hover{
    background: #4b545f;
    }

    .gamecontainer{
    background: #000000;
    padding: 15px;
    border-radius: 10px;
    width: 70%;
    height: 65%;
    float:left;
    }

    .center {
    margin-left:auto;
    margin-right:auto;
    }

    .controls {
    }

    .toggle {
    }

    .mainparagraph {
    padding:10px;
    }

    # October 30, 2012 at 12:47 pm

    We need to see a link to a live site.

    # October 30, 2012 at 12:48 pm

    Sadly, it’s a site i have on my flash drive. :( any way i could post the folder?

    # October 30, 2012 at 12:50 pm

    Nope….you’ll have to put a reduced case in [Codepen](http://codepen.io/pen/ “Codepen”)

    My guess is that it may relate to “inline-table”

    # October 30, 2012 at 12:52 pm

    How would i do that? (and thank you for making the css look nicer in my post.)

    # October 30, 2012 at 12:52 pm

    try this in your html:


    topmargin=”0″>

    i usually use a reset.css that might help in these case:

    http://meyerweb.com/eric/tools/css/reset/

    # October 30, 2012 at 12:54 pm

    Or you could use ‘normalise’

    To put your html & CSS in codepen, go to codepen.io and put your HTML& CSS in the appropriate boxes.

    Don’t bother with the body background image though.

    # October 30, 2012 at 12:56 pm

    Ahhhh…. Thanks, JoniGiuro. i’d been too lazy to make a reset.css. i’ll be sure to make a habit of it in the future. :)

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

You must be logged in to reply to this topic.

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