List Item Problems

Vertically align text and height adjusting

[Harvs]

I am constructing a navigation system using an unordered list that will (hopefully) act like buttons. The menu looks something like this:

¦ Item 1 ¦ Item 2 ¦ Item 3¦ Item 4 ¦

Each item is a fixed width and has a height of 3em (So it will grow with the text size).

My first question is how can I vertically align the text within the list items.

Secondly one of my list items has two lines of text while the rest have one line. So if I increase the text size in my browser the two lined list item grows bigger (vertically) than the other list items. Is there someway I can keep all the list items the same height as the largest list item? The reason this is a problem is because each of the ltems have a border and when the large item increases in height the bottom borders of the list items no longer line up vertically.

[esteele]

On your first one, you could probably solve this by padding it instead of setting a height. So, if the text is 1em high, pad the top and bottom by 1em.

[createErrorMsg]

how can I vertically align the text within the list items

If you use line-height instead of height, then text should align to the vertical middle. If it doesn't, try adding a vertical-align: middle, too.