CSS list item width/height does not work

Question

I tried to make a navigation inline list. You can find it here: http://www.luukratief-design.nl/dump/parallax/para.html

For some reason it does not display the width and height of the LI. Here is the snippet. What is wrong with this?

.navcontainer-top li {
    font-family: "Verdana", sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1em;
    text-align: center;
    display: inline;
    list-style-type: none;<br>
    width: 117px;
    height: 26px;
}


.navcontainer-top li a {
    background: url("../images/nav-button.png") no-repeat;
    color: #FFFFFF;
    text-decoration: none;
    width: 117px;
    height: 26px;
    margin-left: 2px;
    margin-right: 2px;
}
.navcontainer-top li a:hover {
    background: url("../images/nav-button-hover.png") no-repeat;
    color: #dedede;
}

Answer 1

Declare the a element as display: inline-block and drop the width and height from the li element.

Alternatively, apply a float: left to the li element and use display: block on the a element. This is a bit more cross browser compatible, as display: inline-block is not supported in Firefox <= 2 for example.

The first method allows you to have a dynamically centered list if you give the ul element a width of 100% (so that it spans from left to right edge) and then apply text-align: center.

Use line-height to control the text's Y-position inside the element.

Answer 2

Inline items cannot have a width. You have to use display: block or display:inline-block, but the latter is not supported everywhere.

Answer 3

I think the problem is, that you're trying to set width to an inline element which I'm not sure is possible. In general Li is block and this would work.

Answer 4

Using width/height on inline elements is not always a good idea. You can use display: inline-block instead

Answer 5

Remove the <br> from the .navcontainer-top li styles.

Answer 6

I had a similar issue trying to fix the item size to fit the background image width. This worked (at least with Firefox 35) for me :

.navcontainer-top li
{
  display: inline-block;
  background: url("../images/nav-button.png") no-repeat;
  width: 117px;
  height: 26px;
}