Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    ead
    ead is offline
    Junior Member
    Join Date
    Dec 2012
    Posts
    9
    Member #
    34061
    Hello

    I have been trying to erase gaps between navigation items in vain. The navigation is based on the following code:

    #nav li {
    text-align: center;
    background: #e0ebaf;
    display: inline;
    border: 1px solid red;
    }
    #nav a {
    display:inline-block;
    margin: 0px;
    padding: 0px;
    border: none;

    #nav li a{
    width: 120px;

    Because the width of the wrapper is 976px, the nav whose width is 8 list items wide should just fit in. Instead, both Chrome and IE only display 7 navigation items and gaps between nav items. I have not set any border properties for the nav.

    I cannot get my head round this. Please someone have a look at the screenshot and help me eliminate the gaps in between.
    Attached Images Attached Images

  2.  

  3. #2
    Member
    Join Date
    Nov 2012
    Location
    Tampa. FL
    Posts
    59
    Member #
    33844
    Liked
    21 times
    Have you set the margin and padding to 0 on your ul?
    #nav ul{margin:0; padding:0}

    A link the the site would be helpful.
    Freelance Web Developer

  4. #3
    ead
    ead is offline
    Junior Member
    Join Date
    Dec 2012
    Posts
    9
    Member #
    34061
    Quote Originally Posted by ekim941, post: 244808
    Have you set the margin and padding to 0 on your ul?
    #nav ul{margin:0; padding:0}

    A link the the site would be helpful.
    Sorry, the site has not been published yet, but the CSS contains:

    #nav{
    list-style-type: none;
    border-style: none;
    border-color: #e0ebaf;
    width: 986 px;
    overflow: hidden;
    text-align: center;
    margin: 0;
    padding: 0;

    }

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Mike's half-right.

    #nav li {margin: 0; padding: 0;}

    Assuming #nav is your ul, you're fine. But you also need it on your li.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    ead
    ead is offline
    Junior Member
    Join Date
    Dec 2012
    Posts
    9
    Member #
    34061
    Thanks for the reply. It's becoming ever more mystifying because when I moved the below properties to the beginning of the CSS file, the gaps had remained unchanged but the left and right margins of the main text body have disappeared:

    #nav li {
    text-align: center;
    background: #e0ebaf;
    display: inline;
    margin: 0;
    padding: 0;
    }

    Please give me further advice as it's completely beyond me.

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You're going to have to show us the page at this point. It could be just about anything.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    ead
    ead is offline
    Junior Member
    Join Date
    Dec 2012
    Posts
    9
    Member #
    34061
    Ok, I have included as much details as I'm allowed to disclose here:

    The HTML source code is:

    <body>
    <div id = "wrapper">
    <!--header-->

    <ul id="nav">

    /* abbreviated for client confidentiality */

    <li><a href="german.html">German</a></li>
    <li><a href="french.html">French</a></li>
    <li class="En borderless"><a href="../en/index.html">English</a></li>
    </ul>

    <div id = "main">

    The CSS code is:

    @charset "utf-8";
    /* CSS Document */

    #nav li {
    margin: 0;
    padding: 0;
    text-align: center;
    background: #e0ebaf;
    display: inline;

    }
    *{
    margin: 0;
    padding: 0;
    border: none;

    }

    h2{
    padding-bottom: 0.5em;
    }
    h3{
    padding-bottom: 0.5em;
    }
    p{
    padding-bottom: 1em;
    }
    ol{
    padding-bottom: 1em;
    list-style-type: upper-roman;
    }

    body {
    font-family: ??-????;
    background-color: #e0ebaf;
    line-height: 1.6em;
    }

    #nav li a{
    margin: 0;
    padding: 0;
    width: 122px;
    }

    #wrapper {
    background: #fef4f4;
    width: 986px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    margin: 0 auto 0 auto;
    border-radius: 20px;

    }

    #wrapper h1 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }

    #main {
    padding-top: 1em;
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 2em;
    }

    #nav{
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-style: none;
    border-color: #e0ebaf;
    width: 986 px;
    overflow: hidden;
    text-align: center;

    }

    #nav a{
    text-decoration: none;
    font-weight: bold;
    color: blue;
    }

    #nav a:hover{
    color: white;
    background-color: #e0ebaf;
    }
    #nav a:visited {color:#000030;}

    #nav a {
    display:inline-block;
    border: none;

    #nav a:visited {
    color:#000030;
    }
    Attached Images Attached Images

  9. #8
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    According to your code posted above you are NOT defining the margin and padding to 0 on the "nav a li" definiton

  10. #9
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    The resason for the GAPS, every browser has some default padding and margin settings built in to use in case you don't define them... And they are all different.

    What I try to encourage everyone that is using CSS to do is:

    For every div define the following:

    Height
    Width
    Margin ( even if 0 )
    Padding ( even if 0 )

    Those 4 things will use the browsers default setting ( which are different for each browser ), unless you specifically define them. Hence defining a margin of 0 will save a lot of headaches in the long run.

  11. #10
    ead
    ead is offline
    Junior Member
    Join Date
    Dec 2012
    Posts
    9
    Member #
    34061
    I had actually got rid of the margin and padding properties because setting them to 0 had made no change. For disambiguation, I have added those properties in now.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:31 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com