CSS: Anchor WILL NOT Accept Height

Question

I pulled my hair for an hour and I just can’t understand why it doesn’t work.

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

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 defaults to inline , and you cannot set the height / width of inline elements.

Answer 2

The default display type for the link is built-in, which does not match the height or width. Instead, report that your links are built-in blocks that retain the stream of links, but make them treat your request as a specific size (height).

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

Answer 3

Try setting line height instead of height:

line-height:36px

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