Problem with display change of <li> on hover

Below is a simple script that shows some "tabs" or a single menu row.   For some reason I am unable to get the hover color take up the entire <li> block.   The hover is light blue, the tab is dark blue.  When I hover over the <li> tag, the dark blue area changes to light blue except for a few pixels on the side.  I cannot figure out how to get rid of these pixels of dark blue.  When hovering over, I would like the entire tab to change to light blue.   In IE, the few pixels appear on the right, in Firefox they appear on the left.

<style type="text/css">
ul.pageTab {
 padding-bottom: 5px;
 padding-top: 5px;
 padding-left: 0;
 margin-top: 0;
 /* cancels gap caused by top padding in Opera 7.54 */
 margin-left: 0;
 color: white;
 font-family: Arial,Helvetica,sans-serif;
 line-height: 18px;
 text-align: left;
 width: 100%;
}

ul.pageTab li {
 display: inline;
 padding-left: 0;
 padding-right: 0;
 padding-bottom: 5px;
 /* matches link padding except for left and right */
 padding-top: 5px;
 border-right: 3px solid #fff;
 background-color: #036;
}

ul.pageTab li a {
 padding-left: 10px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-top: 5px;
 color: white;
 text-decoration: none;
}

ul.pageTab li a:hover, ul.pageTab li.current a {
 background-color: #369;
 color: white;
}
</style>


<div id="xxxxx">
<ul class="pageTab">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li class="current"><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>