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

Answer 1

I tried all of these solutions with no success. So, I placed the gradient in the tr and then decided to use the ::before pseudo element and style a border on it. However, I didn't even get as far as adding a border to the pseudo element. The following was enough.

 table thead {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0 );
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9e9d9',GradientType=0 );
}
table th { 
   background: none;
   border-right: 1px solid #a5a694; 
   background-clip: padding-box;
   position: relative!important; 
   z-index: 100;
}
table th:before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: '';
}

But if that doesn't work you could also add a border to the pseudo class as I had originally planned:

table th:before {
    border-right: 1px solid #000000;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: '';
    z-index: 1000;
}

Pseudo classes are great, I use them all the time and they have very wide browser support, even in IE8.