CODEWITHSUNDEEP
htmlcsswordpressmenu
Merijn de Klerk
Merijn de Klerk

Reputation: 1023

Menu items have a wierd few pixels spacing between eachother

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?

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!

Upvotes: 1

Views: 202

Answers (2)

Sheric
Sheric

Reputation: 416

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.

Upvotes: 4

freefaller
freefaller

Reputation: 19963

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

Upvotes: 1

Related Questions