2 problems with my menu bar

[lukeurtnowski]

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

[binarykern]

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;
}

[ralph.m]

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

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

[lukeurtnowski]

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?

[ralph.m]

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.

[lukeurtnowski]

gotcha!

[ralph.m]

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!