CSS: el ancla NO aceptará la altura

Question

He estado tirando de mi cabello durante más de una hora en esto y simplemente no puedo entender por qué no está funcionando.

HTML:

<div id="mainmenu"> 
    <div class="menu"> 
     <ul> 
      <li class="page_item page-item-6"><a href="http://localhost/mysite/blog/">Blog</a></li> 
      <li class="page_item page-item-4 current_page_item"><a href="http://localhost/mysite/">Front Page</a></li> 
      <li class="page_item page-item-2"><a href="http://localhost/mysite/sample-page/">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; 
} 

Answer 1

Cambio div#mainmenu div.menu ul li a a esto:

div#mainmenu div.menu ul li a 
{ 
    display: block; 
    width: auto; 
    background: none; 
    margin: 10px auto; 
} 

a elemento s son inline de forma predeterminada y no se puede establecer el alto/ancho de los elementos en línea.

Answer 2

altura de la línea Trate en lugar de altura:

line-height:36px

http://jsfiddle.net/AlienWebguy/dP4F9/

Answer 3

El tipo de pantalla por defecto de un enlace es en línea, que no responde a la altura o anchura. En su lugar, dígale a sus enlaces que sean bloques en línea, lo que preserva el flujo de los enlaces, pero les hace respetar su pedido de tener un tamaño específico (alto).

div#mainmenu div.menu ul li a 
{ 
    display:inline-block; 
    height:36px; 
}