Alex Rivera | Logout

Table cell loses border when css gradient filter is applied in IE8

Asked 2010-08-12T06:53:46.187
31

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.

css internet-explorer-8
Edit
Report

1 Answer

3

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
answered 2013-04-11T10:27:23.903

Your Answer