IE8: border + background-image problem

Question

I have a span with a background-image repeat-x + a border.

For some reason only in IE8 (not even IE7/6) the image hides the left border.

When I set the border-left to 2px I can see a 1px border

My Code:

<span class="smallTab calTab calTabUnSel"></span>

.smallTab{text-align:center; border:1px solid #A0A0A0; border-bottom:none; font-size:15px; font-weight:bold; cursor:pointer;}
.calTab{position:relative; float:right; height:20px; width:85px; margin-left:4px;}

.calTabUnSel
{
    background-image: url(../images/tabNoSel.gif);
    background-repeat: repeat-x;
    background-color: #C0BFBD;
    color:#636363;
}