Search code examples
cssmenu960.gs

<li> Items in Horizontal Menu have a Gap Between Them

For some reason the left and right borders of the li items do not touch there is about a 4-5 px gap between them.

#menucontainer {
  display: block;
  float: left;
  width: 100%;
}

ul#menu {
  display: block;
  padding: 5px 0px 5px 15px;
}

ul#menu li {
  display: inline;
  padding: 3px;
  border-right: 1px solid #D8D6FF;
  border-left: 1px solid #D8D6FF;
  margin: 0 !important;
}

ul#menu li a {
  padding: 3px;
  margin: 0;
}
<div id="menucontainer">
  <ul id="menu">
    <li>
      <a href="google.com"></a>
    </li>
    <li>
      <a href="google.com"></a>
    </li>
    <li>
      <a href="google.com"></a>
    </li>
  </ul>
</div>

I am using the 960 grid system CSS reset (which doesn't seem to change my issue w/ or w/o it). I need to get this working in IE 7+ and Firefox - Issue exists in IE8 and FF.

Solution

  • You're using display: inline. That means that whitespace characters between each of those li elements are respected, and will be collapsed into a single space. If you need to, you can try using floats instead, or remove all whitespace between those elements. 

     <ul id="menu">              
     <li><a href="http://example.com"></a>
     </li><li><a href="http://example.com"></a>
     </li><li><a href="http://example.com"></a></li>
 </ul>

    would work, or if you're inclined to using floats, 

    #menu li {
    float: left;
}

    instead of display: inline