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  lt br gt      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

User · Answer

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

User · Answer

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

User · Answer

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  lt   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

User · Answer

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

User · Answer

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

User · Answer

Remove the  lt br gt  from the  navcontainer-top li styles

[css] CSS list item width/height does not work

Examples related to css