Forum Moderators: not2easy

Message Too Old, No Replies

Unordered list item height

Unordered list item height not extending to full height of unordered list.

         

Seidl

6:25 am on Apr 4, 2009 (gmt 0)

10+ Year Member



OK, so I have an inline unordered list as a horizontal navbar. I am having trouble getting the height of the list items to be 100% of the height of the list itself. The only way I have figured out to do it is using float; I use padding to position the list items. However, because my navbar expands the full width of the page (it looks centered), on some screen resolutions there is a larger space to the right of the last link (I'm using float:left). This is why I am looking for an alternative. I have tried margin:0 and padding:0 as well as line-height. My understanding is that the height of the li is determined by the font...is there a way around this besides float?

swa66

10:32 am on Apr 4, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I use menus that are inline. There's an older example here: [webmasterworld.com...] that might be of some use as inspiration to you.

Getting the height right is indeed tricky, setting line-height yourself often makes it a lot easier. Remember that legacy IE versions do line height a bit different from the rest of the browsers.

While building such things I generally remove the backgrounds I want and use different background colors on all elements to see where they end up in the different browsers.