Question

I have a horizontal menu that has been created using an unordered list. The menu is contained within a fixed width div:

<div class="mainContainer">
  <div>
    <ul class="menu">
      <li class="menuItem">One</li>
      <li class="menuItem">Two</li>
      <li class="menuItem">Three</li>
      <li class="menuItem">Four</li>
      <li class="menuItem">Five</li>
      <li class="menuItem">Six</li>
      <li class="menuItem">Seven</li>
    </ul>
  </div>
</div>​

To distribute the menu items evenly over the width I have use the “display: table” on the UL and “display: table-cell” on the list item. I have tried to create a space between each cell by using “border-spacing:3px 0px;”.

.mainContainer {
    width: 960px;
    margin: 0 auto;
    background-color:#999;
    height:100px;
}
.menu {
    list-style-type: none;
    border-spacing:3px 0px;
    padding: 0px;
    display: table;
    margin: 5px 0px 0px;
    text-align:center;
    height: 26px;
    width: 960px;

}
.menuItem {
    background-color: #eee;
    display: table-cell;
    position: relative;
    margin:0px 5px 0px 0px;
    padding:6px 0px;
    width: auto;
    cursor: default;
    color: #002F68;
}​

However I do not want a space to the left of the first menu item and a space to the right on the last item. How can I remove these spaces? IE8+ compatibility is required.

Full example in jsFiddle

Answer 1

Here’s a fiddle.

Instead of border-spacing on the whole menu, use the border attribute on the list items:

.menu {
    list-style-type: none;
    /*border-spacing:3px 0px;*/  <-----remove this
    padding: 0px;
    display: table;
    margin: 5px 0px 0px;
    text-align:center;
    height: 26px;
    width: 960px;

}

.menuTab {
    background-color: #D2DCE0;
    display: table-cell;
    position: relative;
    margin:0px 5px 0px 0px;
    padding:6px 0px;
    width: auto;
    cursor: default;
    color: #002F68;
    border-left: 3px solid #999;  <-----Add this
}

Then, to correct the border on the far left add this pseudo selector (ie8 compatible):

.menuTab:first-child{
     border-left: none;   
}