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

After trying lots of fixes I've come to the conclusion that its simply not worth trying to use filter CSS. A quote from @mdo who's behind the Twitter bootstrap css:

Filters are dangerous business in IE, especially 7 & 8. I'd rather not include those because it'd be huge performance losses for folks who overuse them.

Problems I hit applying css to td elements:

• The position: relative only works for IE9, not IE8
• The z-index: -1 doesn't work on td elements
• If you do have a filter then you have to turn it off for hovering
• My table looked better having the borders than having the gradient on the table cells

Answer 2

Applying this also works:

position: relative;
z-index: -1;

Answer 3

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.

Answer 4

use position: relative !important;

Its work fine...

Answer 5

Use a DIV to contain the content in each cell. Apply the gradient to the DIV and put the border on the cell. The gradient will be restricted to the DIV and will not overwrite the border.

http://jsfiddle.net/WWCaj/1/

Answer 6

I've found a fix but you may not like it...

If you render in IE in quirks mode the border renders fine, it is only obscured if you're using compatibility mode. Compare these two pages in IE8:

• With a DOCTYPE declaration

  • 
    _{(source: boogdesign.com)}

• Without a DOCTYPE declaration

  • 
    _{(source: boogdesign.com)}

What also works is clicking the compatibility view button, but my attempts to get the same results with the compatibility mode meta tags were unsuccessful. I tried using box-sizing, but also with no success. I conclude the only way to get it to work as you want is to force IE into quirks mode, but that may create so many other issues for layout that you may be better off just adding a wrapper element to attach your gradient background to.