CSS: l’ancora NON accetta l’altezza

Mi sono tirato i capelli per oltre un’ora e non riesco proprio a capire perché non funzioni.

HTML:

 

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; } 

inserisci la descrizione dell'immagine qui

Cambia div#mainmenu div.menu ul li a a questo:

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

a elementi sono in inline per impostazione predefinita e non è ansible impostare l’altezza / larghezza degli elementi in linea.

Il tipo di visualizzazione predefinito per un collegamento è in linea, che non risponde all’altezza o alla larghezza. Invece, dì ai tuoi link di essere inline-blocks, che preservano il stream dei link ma li rendono rispettosi della tua richiesta di essere una dimensione specifica (altezza).

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

Prova l’altezza della linea anziché l’altezza:

line-height:36px

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