Menu items have a wierd few pixels spacing between eachother

1 Views

For some reason my menu items keep having some spacing left and right between the menu items..! While I’m kind of sure I havent programmed this..?

Anyone know why there is like 3 pixels spacing between my menu items?

Read More

http://jsfiddle.net/skunheal/ceFSJ/

HTML: 

<div id="menu">
   <ul id="nav">
      <li class="page_item page-item-13">
            <a href="http://www.overdelijn.nl/wp/?page_id=13">Contact</a>
        </li>
      <li class="page_item page-item-5 current_page_item">
            <a href="http://www.overdelijn.nl/wp/">Home</a>
        </li>
      <li class="page_item page-item-7">
            <a href="http://www.overdelijn.nl/wp/?page_id=7">Nieuws</a>
        </li>
   </ul>
</div>

CSS: 

#nav, #subNav {
   list-style: none;
   padding-left: 0px;
   margin: 0px;
}

#nav li, #subNav li {
   display: inline;
    padding:0px;
}

/* Currently selected page nav item (and parent) if applicable */
.current_page_item a,
.current_page_parent a {
    text-decoration: none;
    font-family:futura;;
    color:#CCC;
}

.page_item a{
    text-decoration: none;
    font-family:futura;;
    color:#FFFFFF;
    display:inline-block;
    background:#00C;
    line-height:30px;
    width:120px;
    height:30px;
}   

#menu{
    height:30px;
    text-align:center;
}

Thanx in advance,
Greetings,
Merijn!

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. You’ve set the display of lis to inline. So, the spaces between your li tags (the line-breaks and indentions) behave like spaces between words. Just remove the spaces and make it like this:

    <div id="menu">
 <ul id="nav">
   <li class="page_item page-item-13"><a href="http://www.overdelijn.nl/wp/?page_id=13">Contact</a></li><li class="page_item page-item-5 current_page_item"><a href="http://www.overdelijn.nl/wp/">Home</a></li><li class="page_item page-item-7"><a href="http://www.overdelijn.nl/wp/?page_id=7">Nieuws</a></li>
 </ul>
</div>

    You can also fix it with setting font size of ul to zero and setting it again on lis.

  2. Try removing all the white space from between the <ul> and <li> items.

    Either have them in a single line, or split over the lines like this…

    <ul id="nav"><li class="page_item page-item-13"><a href="http://www.overdelijn.nl/wp/?page_id=13">Contact</a></li
><li class="page_item page-item-5 current_page_item"><a href="http://www.overdelijn.nl/wp/">Home</a></li
><li class="page_item page-item-7"><a href="http://www.overdelijn.nl/wp/?page_id=7">Nieuws</a></li
></ul>

    Update

    Based on your JSFiddle… here is the same fiddle with the white space removed