[Solved] Navigation bar glitches

Very rookie problem here, I'm sure (I'm coming around fairly late to CSS design). I'm attempting a rollover navigation bar. I want white text on blue buttons for the off state, blue text on white for rollover with a border around the button, and white space between the buttons in both states. I'm having two issues. 1) The shift in size and position on the rollover, and 2) creating the white space between the buttons. #1 is really the biggest problem, as I haven't wrestled with #2 quite as much. I'll provide the URL so you can see it in action and then the CSS. Also I've validated both the HTML and the CSS docs and have a proper DOCTYPE.
Thanks in advance for your help.

Bill K.

URL:
http://www.untangled-web.net/untangledweb_test02.html

CSS:

body {
text-align: center;
min-width: 750px;
font-family: geneva, 'Trebuchet MS', sans-serif;
font-size: 11px;
color: #000000;
background-color: #FFFFFF;
}
/*THIS IS THE CONTAINER WHERE WE'LL KEEP ALL THE CONTENT */
#container {
text-align: center;
width: 750px;
margin: 0px auto;
border: 1px solid #CCCCCC;
font-size: 11px;
line-height: 130%;
}
/* END O'CONTAINER */
#top {
text-align: center;
width: 750px;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav {
text-align: left;
background-color: #FFFFFF;
font-size: 12px;
font-weight: bolder;
color: #000000;
float: left;
width: 150px;
display: block;
margin-left: 10px;
padding-left: 4px;
padding-top: 5px;
padding-bottom: 5px;
list-style-type: none;
}
#leftnav ul {
color: #FFFFFF;
background-color: #000066;
border: 1px solid #000066;
display: block;
margin-left: 10px;
padding-left: 4px;
padding-top: 5px;
padding-bottom: 5px;
list-style-type: none;
}
#leftnav li {
color: #FFFFFF;
background-color: #000066;
border: 1px solid #000066;
display: block;
padding-left: 4px;
padding-top: 5px;
padding-bottom: 5px;
list-style-type: none;
}
#lefnav a {
color: #000066;
background-color: #FFFFFF;
border: 1px solid #000066;
display: block;
padding-left: 4px;
padding-top: 5px;
padding-bottom: 5px;
list-style-type: none;
}
#leftnav a:hover {
color: #000066;
background-color: #FFFFFF;
border: 1px solid #000066;
display: block;
padding-left: 4px;
padding-top: 5px;
padding-bottom: 5px;
list-style-type: none;
}
#rightnav {
float: right;
width: 150px;
margin: 0;
padding: 1em;
}
#content
{
text-align:left;
margin-left: 175px;
border-left: 1px solid gray;
margin-right: 175px;
border-right: 1px solid gray;
padding: 1em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h1 {
margin: 0 0 .5em 0;
font-size: 14px;
}

* html body {
font-size: x-small; /* for IE5 Win */
f\ont-size: small; /* for other IE versions */
}
html>body {
font-size: x-small; /* be nice to opera */
}
p { font-size: 80%; padding: .4em 0; line-height: 1.8em; }
h1 { font-size: 175%; padding: 1em 0 .2em 0; }
h2 { font-size: 160%; padding: 1em 0 .2em 0; }
h3 { font-size: 140%; padding: 1em 0 .2em 0; }
ul, dl { font-size: 80%; padding: .5em 1em .5em 2em; }
ul li { line-height: 1.6em; }
img { border: 0; }