http://mayacove.com/dev/css/test_ul_nav.html

why is the border-right for that first div not lined up with the text (and it seems to be taller than the text..) I often run into this problem..

I don't like to give these ul's and li's (or <a>'s>) heights.. but did it to try to line up the border with the text; I gave ul, li, and <a> height and line-height same as font-size... the border still seems taller than the text.. (actually not sure it's taller, I think positioned higher than the text.. why is this...) I often run into this prob... it's a pain....

(right now this is how it looks in mac FF & Chrome)

how can I fix this please...

thank you.....