IE8: border + background-image problem
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;
    }
IE8: border + background-image problem
===

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;
    }