CODEWITHSUNDEEP
htmlcssalignment
MRC
MRC

Reputation: 553

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>

Upvotes: 1

Views: 65

Answers (2)

potashin
potashin

Reputation: 44581

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

Upvotes: 2

Alon Eitan
Alon Eitan

Reputation: 12025

you have this vertical-align:center;, change it to vertical-align:middle; for LI element

Upvotes: 0

Related Questions