2 problems with my menu bar

HTML & CSS
1

on my menu bar,
http://fixmysite.us/menu.php

  1. how do I vertically center the text, giving it a margin-top didn’t work??)
    and 2) why is there a little white border to the right of the borders of each <li>?

Thanksss

2

For #1, add a line-height property with value = height.

ul#menu li {
    border-right: 1px solid #000000;
    display: inline-block;
    height: 42px;
    line-height: 42px;
    list-style: none outside none;
    padding: 0 15px;
    text-align: center;
}
3

For problem 2, use float: left instead of display: inline-block;

ul#menu li {
  border-right: 1px solid #000000;
  [COLOR="#FF0000"]float: left;[/COLOR]
  height: 42px;
  [COLOR="#FF0000"]line-height: 42px;[/COLOR]
  list-style: none outside none;
  padding: 0 15px;
  text-align: center;
}
4

ok, those fixes worked… thanks\But just so I know why the y worked,
I changed line-height to the height of each li because each li needs a line-height (then I can apply a padding to it) equal to the desired height.
And floating each li to the left makes them flush against each other?

5

The line-height fix is handy for text that only sits on one line. It forces the text box to the height of the container.

I’m not sure why inline-block caused the effect you saw, but it doesn’t work in older browsers while float does, so it’s the easiest solution. Float makes an element wrap its contents tightly, which i handy in this situation.

6

gotcha!

7

Yeah, inline-block is great, but it has a few quirk like what you experienced here, so I don’t use it for menus. Paul O’B could tell you why inline-block left those left gaps. I’m sure I’ve seen him discuss it before, but my brain is a memory sieve!