Ok anyone who can help me with this problem would be a HUGE help, I've been trying to fix it for hours now and haven't gotten anywhere. I've got an unorded list as a vertical navigation element, with a background image for the ul. Everything displays fine with the list, until I tried to add a background image for the "hover" state. It is perfectly centered in IE but gets pushed to the left in Firefox. This seems to occur after i specify the width of the link element. (as the width of the background image) because without specifying a width the links display perfectly in the center in all browsers, however you can only see some of the background image. I've looked in the forums and didn't see anything. The link is http://www.ericberg.net and the CSS is here:

body {
background: #9cf;
font: small/1.4 "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
text-align: center;
color: #393;
letter-spacing: 1px;
margin: 0;
padding: 0;
border: 0;
}
#box {
width: 640px;
margin: 0 auto;
padding: 10px 0 0 0;
text-align: left;
}
html>#box {
width: 640px;
}
#head {
background: url(i/hed.gif) no-repeat center top;
margin: 0;
padding: 6px 0 0 0;
}
#head h1 {
margin: 10px 0 0 25px;
padding: 0;
height: 53px;
text-align:left;
}
#nav {
float: right;
display: block;
padding: 23px 50px 0 0;
width: auto;
text-align: center;
}
html>#nav {
}
#nav ul {
text-align: center;
background: transparent url(i/nv1.gif);
margin: 0;
display: block;
padding: 19px 0 0 2px;
list-style-type: none;
line-height: 2em;
letter-spacing: 2px;
border: 0;
height: 131px;
width: 119px;
voice-family: "\"}\"";
voice-family: inherit;
width: 117px;
}
#nav ul li {
margin: 0;
padding: 0;
display: block;
}
#nav ul li a {
margin: 0;
padding: 0;
text-decoration: none;
text-align: center;
color: #900;
width: 79px; /*remove this width and links center in all browsers, with it links get pushed left in Firefox only*/
height: 26px;
display: block;
}
#nav ul li a:hover {
background-image: url(i/hv2.gif);
}
#nav .active {
background-image: url(i/hv2.gif);
}
#main {
background: url(i/mid.gif) center top repeat-y;
margin: 0;
padding: 0;
min-height: 260px;
}
.content {
text-align: left;
width: 400px;
padding: 20px 0 0 0;
margin: 0 0 0 30px;
}
.content p {
text-indent: 20px;
margin: 0;
padding: 0;
}
#foot {
background: transparent url(i/botsi.gif) no-repeat center top;
margin: 0px 0 0 0;
padding: 0;
height: 225px;
vertical-align: bottom;
display: block;
}
#foot p {
text-align: left;
margin: 0;
padding: 196px 0 0 25px;
color: #FFF;
font-size: 10px;
}

thanks