Search code examples
htmlcssalignment

Menu list with borders not displaying correctly

I have a menu with 5 items. The idea is that there is a border between each.

The issue is that some of the menu items need to be double lined, but when this happens, the borders are all over the place.

I've been looking at the code for an hour almost and not sure how to correct this.

I could just have them single lined, but that goes against the design.

JSFIDDLE:

http://jsfiddle.net/69CSf/

CSS:

body {
    background-color:black;
}
#menu {
    width:500px;
    top:100px;
    -border:solid 1px #ffff00;
    height:40px;
    vertical-align:middle;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family:'Open Sans', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color:#FFF;
    width:100%;
    height:40px;
}
li {
    display: inline-block;
    width:19%;
    height:40px;
    text-align:center;
    padding-top:9px;
    vertical-align:center;
}
li~li {
    border-left: 3px solid #FFFFFF
}
li>a:hover {
    color:#FFF;
}
li>a {
    color:rgb(200, 200, 200);
    text-decoration:none;
}

HTML:

<div id="menu">
    <ul>
        <li><a href="#">Philosophy</a>
        </li>
        <li><a href="#">Your Trainer</a>
        </li>
        <li><a href="#">Word of Mouth</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
    </ul>
</div>
Solution

  • Change display value from inline-block to table-cell and change vertical-align value to middle (vertical-align:center does not exist at all).

    Example