Hovering problem

[Ruriko]

This is my layout http://ruriko.serverspeople.net/ When you hover the links on the dark red bar you will see the text moved up by 1-2px. How can I fix this?

body {
background-color: #faebec;
}

#wrapper {
text-align: left;
padding: 0px;
border:1px dashed #C61C21;
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
}

#header {
background-color: #FFCCCC;
background-image: url(images/header.jpg);
height: 200px;
width: 950px;
}

#bar {
background-image: url(images/bar.jpg);
height: 28px;
width: 950px;
text-align: center;
vertical-align: middle;

}

#bar li {
display: inline;
list-style-type: none;
vertical-align: middle;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}

#bar a {
color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
}

#bar a:hover {
color: #A50000;
background-color: #FFFFFF;
text-decoration: none;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 9px;
padding-left: 10px;
}

#side-a {
float: left;
width: 150px;
background-color: #faebec;
border: 1px dashed #C61C21;
padding: 2px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #A50000;
font-size: 10px;
}

#side-a a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #A50000;
text-decoration: none;
}

#side-a a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #A50000;
text-decoration: underline;
}

#side-a ul {
list-style-type: none;
margin: 0px;
padding: 2px;
}

#side-a li {
font-size: 12px;
font-weight: bold;
list-style-type: none;
padding-bottom: 10px;
}

#side-a li li {
font-size: 10px;
font-weight: normal;
padding: 0px;
}

#side-b {
float: right;
width: 150px;
background-color: #faebec;
padding: 2px;
margin-top: 5px;
margin-bottom: 5px;
border: 1px dashed #C61C21;
margin-right: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #A50000;
}

#content {
float: left;
width: 611px;
background-color: #FFFFFF;
margin-top: 5px;
margin-bottom: 5px;
border: 1px dashed #C61C21;
padding: 2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #A50000;
margin-left: 5px;
font-size: 10px;
}

#content a {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #A50000;
text-decoration: none;
}

#content a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #A50000;
}

#footer {
clear: both;
background-color: #A50000;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
padding: 2px;
font-size: 10px;
text-align: center;
}

#footer a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
}

#footer a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-decoration: underline;
}

h2 {
font-size: 14px;
}

h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding: 2px;
}

.post {
padding-left: 2px;
}

#comment {
width: 590px;
background-color: #FFFFFF;
border: 1px solid #A50000;
}

#commentform {
padding: 2px;
}

input {
border: 1px solid #A50000;
background-color: #FFFFFF;
margin-top: 2px;
color: #A50000;
}

.alt {
padding: 0px;
}

.commentmetadata {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

.postmetadata {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

cite {
font-weight: bold;
font-style: normal;
}

small {
font-size: 10px;
}

[Centauri]

This is due to you trying to add padding to simulate a block on hover, which will be highly dependant on font size. Better bet is to set the line height of the <a> element to be equal to the bar height. As the <a> will need to be block display for this to work, best float both the <a> and <li> left and centre things with left padding on the <ul> (the width on the <ul> is also not needed) :

#bar {
	background-image: url(images/bar.jpg);
	height: 28px;
	padding: 0 0 0 400px;
}

#bar li {
	float: left;
	list-style-type: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}

#bar a {
	color: #FFFFFF;
	line-height: 28px;
	padding-right: 10px;
	padding-left: 10px;
	text-decoration: none;
	float: left;
}

#bar a:hover {
	color: #A50000;
	background-color: #FFFFFF;
}