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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Nav list spacing issue- HELP!

    Im having spacing issues with my main navigation. I cant get rid of the spaces between the li. There are these white spaces between the dark gray main navigation. Ive tried putting negative px in my li and my paddings/margins for li are 0. I am fairly new to css and this is my first list navigation. Any help is appreciated.


    THANKS

    CSS
    http://www.ochies.com/cps/110409/cps.css

    HTML
    http://www.ochies.com/cps/110409/sub.html

    > ------------ BELOW IS THE CSS

    #pipe {
    font-size:13px;
    }
    #pipe ul {
    float: left;
    margin-top: 74px;
    margin-left: 143px;
    padding: 0;
    display: inline;
    }

    #pipe ul li {

    margin-top: 0px;
    margin: 0px;
    padding: 0px 0px;
    /*border-left: 1px solid #000;*/
    list-style: none;
    display: inline;
    width: 100%;
    }


    #pipe ul li.first {
    background-image: none;
    margin-left: 0;
    margin-right: 0;
    border-left: none;
    list-style: none;
    display: inline;
    }



    #pipe li a:link {
    /*background-image:url(images/navline.gif);*/
    background-color:#999;
    color:#333333;
    padding: 19px;
    margin-right: 0px;
    text-decoration: none;

    }

    #pipe li a:visited {
    /*background-image:url(images/navline.gif);*/
    background-color:#999;
    color:#333333;
    padding: 19px;
    margin: 0px;
    text-decoration: none;
    }

    #pipe li a:active {
    /*background-image:url(images/navline.gif);*/
    background-color:#999;
    color:#333333;
    padding: 19px;
    margin: 0px;
    text-decoration: none;
    }

    #pipe li a:hover {
    color:#ffffff;
    background-image:url(images/navline_on.gif);
    padding: 19px;
    margin: 0px;
    text-decoration: none;
    }




    > ------------ BELOW IS THE CODE

    <div id="pipe">
    <ul>
    <li><a href="(a href="")">HOME</a></li>
    <li><a href="(a href="")">WHAT WE DO</a></li>
    <li><a href="(a href="")">SEMINAR</a></li>
    </ul>
    </div>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #pipe ul li {/*sub.html (line 95)*/
    /*display:inline;*/
    float:left;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    /*width:100%;*/
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    tuba74 (11-04-2009)

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks abduraooft!!!

    that worked. does displaying "inline" automatically add spaces? for future reference, dont put "display:inline" on li? Sorry, i have so many questions. I just get frustrated with css since its not as clear cut as tables.

    THANKS AGAIN!

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    No, nothing like that. It's that single space shown when you display inline text or some tags, like
    Code:
    Lorem ipsum dolor sit amet, consectetur <span>adipisicing elit </span>
    To avoid this, you'd need to remove all spaces between the list items, like
    Code:
    <ul>
    	<li><a href="http://www.google.com">HOME</a></li><li><a href="http://www.google.com">WHAT WE DO</a></li><li><a href="http://www.google.com">SEMINAR INFORMATION</a></li><li><a href="http://www.google.com">HOW TO CONTACT US</a></li>
    </ul>
    Now, display:inline; would be enough!

    PS: Your markup has some errors in it, see http://validator.w3.org/check?uri=ht...Inline&group=0
    I'd recommend to fix them first, before moving ahead.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Yeah the white space in the html between list items adds spaces to the rendered page (i think only in IE), which is really lame since removing all the white space makes the list a far more unwieldy chunk of html to look at and work with. What I do to get around this is to comment out the white space/line breaks, like so:

    Code:
    <ul id="navbar" class="navbar_cs"><!--
        	--><li><a href="#">One</a></li><!--
        	--><li><a href="#">Two</a></li><!--
        	--><li><a href="#">Three</a></li><!--
        	--><li><a href="#">Four</a></li><!--
        	--><li><a href="#">Five</a></li><!--
    --></ul><!--navbar-->
    I guess the excessive comments are really unnecessary bloat but I find that a hundred times easier to deal with than having the whole list on one line with no breaks.


  •  

    Posting Permissions

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