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.

1
  • great find. As you said the gradient overrides the border, because if you set the border much bigger the gradient extend and overrides it. I searched for a solution but no results..hope someone knows a trick
    – Sotiris
    Aug 12, 2010 at 9:28

7 Answers 7

26

Applying this also works:

position: relative;
z-index: -1;
7
  • 5
    This definitely makes the border show up, but (for me) it clears out everything inside the cell; including the background; Dec 23, 2010 at 16:45
  • 6
    Just position: relative; was all I needed. Sep 6, 2011 at 6:19
  • +1: Worked like a charm for me in IE 6, 7, 8 and 9. Also harmless to Chrome, Firefox and Safari Mobile. I needed the z-index: -1; to make it work in IE8 (it was fine without it everywhere else). Jan 9, 2012 at 9:26
  • 1
    This doesn't work if you are dealing with table cells. It blanks out the cells (contents and gradient). Otherwise it's great.
    – Seb Barre
    Jan 25, 2012 at 20:58
  • 1
    For me this gets the borders, and the cell contents are visible, but clicks are not read.
    – Tim Scott
    Mar 16, 2012 at 17:51
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:

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.

8
  • I get the same result with and without declaring DOCTYPE in IE8. Is it magic ?
    – BILL
    Nov 6, 2013 at 8:57
  • @Victor I don't know, what result do you get?
    – robertc
    Nov 6, 2013 at 9:02
  • I get table cells with borders, I noticed that if I used IE10 with set ie8 mode in developers tools it didn't get any result. For properly testing render cells with borders in IE I must use original ie8 without setting browser mode. I concluded that IE8 and IE8 browser mode in IE9,IE10 or IE11 doesn't same.
    – BILL
    Nov 6, 2013 at 9:52
  • @Victor Most likely you have IE8 in compatibility mode as discussed in my answer
    – robertc
    Nov 6, 2013 at 9:54
  • 1
    Yes, IE10 in IE8 mode renders differently to IE8
    – robertc
    Nov 6, 2013 at 13:40
6

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/

1
  • Agreed. The only thing that fixes problem with background and border at the same time on IE8.
    – Tukkan
    Jun 10, 2014 at 14:06
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
1

use position: relative !important;

Its work fine...

1
  • I found that I didn't need the !important, although it does work with that too. Also note that this needs to be applied to the td and not the table
    – icc97
    Mar 29, 2013 at 16:47
1

on the td:

  /* enough for IE9 */
  background-origin: padding-box;
  background-clip: padding-box;
  /* for IE8 */
  position: relative;

worked for me.

also you may want to experiment with border-collapse as this bug behave differently between

  border-collapse: separate 

and

  border-collapse: collapse
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.