How to set height of list items in HTML?

Question

Here is my code:

HTML

<div class="menu">
    <ul>
      <li class="active"><a href="index.html">HOME</a></li>
      <li class="active"><a href="#">COMPANY</a></li>
      <li class="active"><a href="#">SOLUTIONS</a></li>
      <li class="active"><a href="#">SERVICES</a></li>
      <li class="active"><a href="#">NEWS & EVENTS</a></li>
      <li class="active"><a href="#">BLOGS</a></li>
      <li class="active"><a href="#">CONTACTS</a></li>
    </ul>
  </div>

CSS

.header .menu ul { margin:33px 10px 0 0; padding:0; float:right; width:auto; height:12px; list-style:none;}
.header .menu ul li { margin:0 4px; float:left;}

It does not recognize the height feature. Why? How can I set the height of menu item?

Jacqui

Amazing that this hasn't been answered yet :/ – Huntingdonshire

Answer 1

You're missing a semicolon :-)

You can also try setting the line-height property of the li tags to change the position of the text in the element:

.line-height-li {
    line-height: 30px;
}

Trakas

Answer 2

Just increase the padding-top and padding-bottom as you want. Line height effect other. I found out it by testing it. It work for me.

Fiddle

When you say "Line height effect other", then it is not much clear. You can say that height of any list item is not absolutely of that item, instead it is relative height with respect to top of list. Thus setting line-height or height will not work. Setting more padding top would move list item downwards and setting more padding bottom, moves content below list item downwards. – Swee

Answer 3

.header .menu ul { margin:33px 10px 0 0; padding:0; float:right; width:auto;list-style:none;}
.header .menu ul li { margin:0 4px; float:left;}
.active{height:50px;}

Californium

Answer 4

ul is set to a height of 12 pixels, at least in Firefox.

Handoff

Answer 5

Is the height set on the correct element? You're asking how to set the height of a menu item (presumably, an li) but your CSS says you're setting the height of the ul. Perhaps, moving height: 12px; from where it is to .header .menu ul li could help.

Edrisedrock

Answer 6

The height of the list does not necessarily change the height of the visible list items. I created a small example to show how those heights look like, if you hover on the items, you'll see the height's changing. That because of the overflow attribute of the list.

.menu ul {
  margin: 10px 10px 10px 5px;
  padding: 10px;
  float: right;
  width: auto;
  height: 12px;
  list-style: none;
  background: cyan;
  overflow: hidden;
}

.menu ul:hover {
  overflow: visible;
}

.menu ul li {
  margin: 4px;
  padding: 4px;
  float: left;
  background: yellow;
}

<div class="menu">
  <ul>
    <li class="active"><a href="index.html">HOME</a></li>
    <li class="active"><a href="#">COMPANY</a></li>
    <li class="active"><a href="#">SOLUTIONS</a></li>
    <li class="active"><a href="#">SERVICES</a></li>
    <li class="active"><a href="#">NEWS &amp; EVENTS</a></li>
    <li class="active"><a href="#">BLOGS</a></li>
    <li class="active"><a href="#">CONTACTS</a></li>
  </ul>
</div>

Anyway, in your example, there's no div with a class "header" in your HTML, that's confusing for beginners. Your CSS rules begin with ".header".

Mylesmylitta