internet explorer 8 - Table cell loses border when css gradient filter is applied in IE8

Question

I found the css border on the table cell is lost when applying css gradient filter at the same time. It seems that the gradient effect overrides the border.

Is it a browser bug or am I missing something here?

The style is defined like this:

.c7 {
    color: #000000;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#c0c0c0',EndColorStr='#f0f0f0'); 
    border: #000000 1px solid;
    width: 100px;
    height: 30px;
}

[Update] You could apply an opacity filter and reduce it from 100 to 1, and you can see how border emerges gradually. It confirms my guess that the gradient effect shows over the border.

Answer 1

Applying this also works:

position: relative;
z-index: -1;