I have been pulling my hair our for over an hour on this and I just can't understand why it's not working.
HTML:
<div id="mainmenu">
<div class="menu">
<ul>
<li class="page_item page-item-6"><a href="">Blog</a></li>
<li class="page_item page-item-4 current_page_item"><a href="">Front Page</a></li>
<li class="page_item page-item-2"><a href="">Sample Page</a></li>
</ul>
</div>
</div>
CSS:
div#mainmenu { position: absolute; top: 40px; right: 0; font-size: 77%; }
div#mainmenu div.menu ul,
div#mainmenu div.menu ul li,
div#mainmenu div.menu ul li a
{
height: 36px;
}
div#mainmenu div.menu ul {
display: table;
float: left;
width: 700px;
table-layout: fixed;
position: relative;
}
div#mainmenu div.menu ul li
{
display: table-cell;
padding: 0 10px;
overflow: hidden;
}
div#mainmenu div.menu ul li a
{
width: auto;
background: none;
margin: 10px auto;
}
3 Answers
Change div#mainmenu div.menu ul li a to this:
div#mainmenu div.menu ul li a
{
display: block;
width: auto;
background: none;
margin: 10px auto;
}
a elements are inline by default and you cannot set the height / width of inline elements.
The default display type for a link is inline, which does not respond to height or width. Instead, tell your links to be inline-blocks, which preserves the flow of the links but makes them respect your request to be a specific size (height).
div#mainmenu div.menu ul li a
{
display:inline-block;
height:36px;
}
Try line height instead of height:
line-height:36px
