CSS HTML Multiline navigation examples

Question

I am creating a horizontal navigation for a web site. Below is an example of the markup (I have little to control on this as it is being generated for me).

<div id="menu">    
    <ul class="menu">
        <li class="menu"><span><a>Link 1</a></span></li>
        <li class="menu"><span><a>Link 2</a></span></li>
        <li class="menu"><span><a>Link 3</a></span></li>
        <li class="menu"><span><a>Link 4</a></span></li>
        <li class="menu"><span><a>Link 5 a long one</a></span></li>
        <li class="menu" ><span><a>Link 6 a long one</a></span></li>
        <li class="menu"><span><a>Link 7</a></span></li>
        <li class="menu"><span><a>Link 8</a></span></li>
    <ul>
</div>

The problem I am having is that I have 8 navigation items with multiple words in each item. To make it fit I am limiting the width of the items to be a 12.5%. This cause some of the menu items to be two lines of text and others to be 1 line. I am trying to get it so each of the a tags are the same height eg. 75px high. This is so they all have the same active area to be a menu item. On top of this I am trying to vertically align the text. Below is my css that I am trying:

#menu { 
    text-align:center; 
}

#menu ul {
    display:inline-block;
    margin:0 auto;
    list-style:none;
}

#menu li {
    display:inline;
    height:2ems; 
}
#menu li a {
    display:block; 
    float:left;
    width:12.5%; 
    text-decoration:none; 
    padding:0; 
    height:75px; 
    text-align:center;
}

Would any one be able to point out where I am going wrong? The text is not vertically aligned and the a tag is not 75px high but the height of the text.

Answer 1

First, it should be </ul> and there is no such thing as "ems" for units, it should be height:2em. height will not work on any block which has display:inline. It needs to be at least display:inline-block.

The best solution would be to use display:table-cell, but it will not work on IE 6 & 7 (will work on IE 8).