Navigation bounces on first and last li link in IE 6 only - css

Question

I'm having a weird problem with my navigation in IE 6. Only the first and last links of the navigation bounce when hovered over.
Why would this be happening?
My CSS file:
#navigation {
width: 930px;
height: 30px;
background-color: #f1faff;
text-align:center;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style: none;
line-height: 30px;
}
#navigation ul li {
display: inline;
}
#navigation ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #0067b4;
display: inline;
text-decoration: none;
text-transform: uppercase;
padding: 7px 50px;
}
#navigation ul li a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #5e5e5e;
display: inline;
text-decoration: none;
text-transform: uppercase;
padding: 7px 50px;
}
#navigation ul li a.first {
padding-left: 8px;
margin: 0px;
overflow: hidden;
border: 0px;
}
#navigation ul li a.last {
padding-right: 8px;
margin: 0px;
overflow: hidden;
border: 0px;
}
The site where this is happening is available at http://www.paysonsecure.com/protekskiracing/

Answer 1

I would add this to your global-ie6.css
#navigation ul { display: inline-block; }

Answer 2

Thanks gutierrezalex!! I had the same problem and it works adding {display: inline-block;} at my styles..it works for any browser:
ul.menu li a{
text-decoration:none;
color:black;
display:block;
padding:0;
margin:0;
display:inline-block;
}
ul.menu li a:hover{
background-color:#5cc2ed;
color:#ffffff;
display:inline-block;
}