Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,043
    Thanks
    19
    Thanked 42 Times in 42 Posts

    HTML/CSS nav bar problem

    if you go here
    http://rafiki.freehostia.com/upload/index.php
    you can see the navbar im not sure about other browsers but with FF it has a small space in between each different link button heres html
    Code:
    <div id="navcontainer">
    
    			<ul id="navlist">                           
    				<li id="active"><a id="current" href="/index.php">Homepage</a></li>
    				<li><a href="/upload.php">Upload It!</a></li>
    				<li><a href="/contact.php">Contact Us</a></li>
    				<li><a href="/about.php">About Us</a></li>
    				<li><a href="/advertise.php">Advertising</a></li>
    				<li><a href="affiliate.php">Affiliate With Us</a></li>
    				<li><a href="link.php">Link Back</a></li>
    			</ul>
    </div>
    and heres the CSS
    Code:
    #navlist {
    padding : 3px 0;
    margin : 0;
    border : none;
    text-align : left;
    letter-spacing: 2px;
    color : #666;
    background : #6FBF20;
    }
    #navlist li {
    list-style : none;
    margin : 0;
    display : inline;
    }
    #navlist li a {
    text-decoration : none;
    padding : 3px 1.2em;
    margin : 0;
    border :none;
    color : #333;
    background : #cbeea8;
    }
    #navlist li a:link {
    color : #333;
    background : #b9e588;
    }
    #navlist li a:visited {
    color : #333;
    background : #b9e588;
    }
    #navlist li a:hover {
    border : 0 solid #d2dcc9;
    color : #fff;
    background : #75c22a;
    }
    #navlist li a#current {
    text-decoration : none;
    color : #fff;
    background : #75c22a;
    border : none;
    }
    thanks to you all in advance.

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Try altering the paddding for #navlist li a

    Code:
    #navlist li a {
    text-decoration : none;
     padding : 3px 1.2em; /* set it to 0 to see of this is what causes the padding */
    margin : 0;
    border :none;
    color : #333;
    background : #cbeea8;
    }
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,043
    Thanks
    19
    Thanked 42 Times in 42 Posts
    nope sorry that didnt work, any other suggestions
    i tried
    Code:
    #navlist li a {
    text-decoration : none;
     padding : 0px 1.2em; /* set it to 0 to see of this is what causes the padding */
    margin : 0;
    border :none;
    color : #333;
    background : #cbeea8;
    }
    Code:
    #navlist li a {
    text-decoration : none;
     padding : 0px; /* set it to 0 to see of this is what causes the padding */
    margin : 0;
    border :none;
    color : #333;
    background : #cbeea8;
    }
    and
    Code:
    #navlist li a {
    text-decoration : none;
    margin : 0;
    border :none;
    color : #333;
    background : #cbeea8;
    }
    Last edited by rafiki; 07-29-2007 at 05:38 PM.

  • #4
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Seems like the problem was caused by the link break; try collpasing all of the li's - though this is rather messy.

    Alterntivley, you could set a margin-left: -6px;

    Code:
    #navlist li a {
    text-decoration : none;
    padding : 3px 1.2em;
    margin : 0;
    margin-left: -6px;
    border :none;
    color : #333;
    background : #cbeea8;
    }
    Though this makes the first one go 6px to the left as well - should be easy to remedy though.
    Last edited by BWiz; 07-29-2007 at 06:06 PM.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #5
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,043
    Thanks
    19
    Thanked 42 Times in 42 Posts
    yeah thats better apart from the 6px of the first one which is now overlapping and the last one goes onto the next line, maybe changing the font to 70% or somethin would help.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Inline elements will have about 4px gap in between them, this is normal. To get rid of the gap without using negative margins you need to float the li's to the left to have them on one line.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •