CSS: anchor will NOT accept height
11,279
Solution 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
elements are inline
by default and you cannot set the height / width of inline elements.
Solution 2
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;
}
Solution 3
Try line height instead of height:
line-height:36px
http://jsfiddle.net/AlienWebguy/dP4F9/
Author by
dcolumbus
Updated on June 26, 2022Comments
-
dcolumbus almost 2 years
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="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; }
-
AlienWebguy almost 12 years
inline-block
would probably be more appropriate but this is definitely an option. -
Léon Pelletier over 9 yearsWould be glad to see this in a simple example. Like 3 lines.
-
AlienWebguy over 9 yearsThat's why there is a JSFiddle link to an example.