CSS list item width/height does not work

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-to开发者_开发百科p 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;
}

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.

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

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.

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

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

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;
}