Getting CSS rollover background to match in size

Question

Hi,
I'm on an intel Mac using DW CS4. I've created pretty straightforward CSS rollovers for my navigation but the background color area of the rollover isn't matching the original background area in size. Looking very carefully, there's an extra pixel in height on the size when you rollover.  I've tried tweaking the 'height:4px" setting in the li a area but it just shifts the dynamic in size and the mis-match is still there.
Here's the link/site: Http://www.frankbright.com
I really appreciate any help. This is probably basic CSS but I'm still learning. Many Thanks,
Frank B.
Btw, I forgot to mention, this seems to vary depending upon the browser. Firefox seems to be the main one not matching up.

Answer 1

Hi Frank
Closely looking i do get a 1px more at the extrem end of the navigation to get rid of 1px, i had refine the solution as below.
Step 1
.oneColElsCtrHdr #nav ul {
    background-color: #000000;
    color: #FFFFFF;
    float: left;
    font-family: arial,helvetica,sans-serif;
    height: 23px;   /************************remove height form it*******************************/
    list-style: none outside none;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 710px;
Step 2
.oneColElsCtrHdr #nav {
    background-color: #000000;    color: #FFFFFF;
    height: 23px; /************************remove height form it*******************************/
    margin-top: 0;
    padding: 0;
    width: 745px;
    flaot:left; /************************add float:left;  *******************************/