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:


    font-family:"Comic Sans MS";


    nav {
    width: 100%;

    nav ul {
    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;
    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{

    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{
    border-top:1px solid #6b727c;
    border-bottom:1px solid #575f6a;
    position: relative;

    nav ul ul li a{
    padding: 15px 40px;

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

    background: #000000;
    padding: 15px;
    border-radius: 10px;
    width: 70%;
    height: 65%;

    .center {

    .controls {

    .toggle {

    .mainparagraph {

    # 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]( “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:


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

    # October 30, 2012 at 12:54 pm

    Or you could use ‘normalise’

    To put your html & CSS in codepen, go to 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".