<li> inline height?

Hey, i’ve been playing around with creating li menus. However, i’ve come across something that I need clarified - if you set the li display to inline, can you not use the height property? It seems to have no effect.


ul li {
  display: inline;
  height: 100px; // doesn't work
}

That is correct - inline lements cannot have width and height set, which is why floating both the <li>s and <a>s is often used in horizontal menus (floating converts inline elements to block, so that sizes may be specified).

Hmm, ok. Any suggestions then on how I can solve this dilemma? I have a background image of height 58px that I want to apply to my horizontal li menu, and I need all 58px of its height to show.

Normally, you would float left both the <li>s and <a>s, set the <a> height and line-height to the 58px as well as the height of the <ul>.

Float them instead of making them inline?

Yes, then size the <a>s and the <ul> height.