Different list item

Question

Hey, I've a very funny problem. I have a very loong ul li a menu and want to have ONE item with different width and height.

The menu looks like this:

<ul id="nav">
  <li id="smaller"><a href="#" id="smallerLink">The smallest item</a></li>
  <li><a href="#">Another item</a></li>
  <li><a href="#">Another item</a></li>
  <li><a href="#">Another item</a></li>
  (...)
</ul>

Then I have something like in:

style.css:

#nav {
  list-style-type: none;
}

#nav li {
  display: inline-block;
  line-width: 2em;
  width: 20px;
  height: 20px;
}

#nav li a {
  display: inline-block;
  width: 20px;
  height: 20px;
}

#smaller {
  width: 10px;
  height: 10px;
}

#smallerLink {
  width: 10px;
  height: 10px;
}

Why the first item isn't 10x10px?

Answer 1

Because it contains an a-tag with width and height of 20px. Set overflow:hidden on your #smaller css definition, then it should work. And make it #nav li#smaller for greater specifity.

#nav li#smaller {
    width: 10px;
    height: 10px;
    overflow: hidden
}