[css] 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-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;
}

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.

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

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

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

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