Skip to content

Linear gradient not working on table head in IE8 - except in compatibility mode #143

nrackleff opened this Issue May 25, 2011 · 4 comments

4 participants


I have applied a linear gradient to the <th> tags of my table using the following CSS:

table.striped thead tr th {
background-color: #c9c94f;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, #dada55), color-stop(1, #c9c94f) );
background: -moz-linear-gradient( center top, #dada55 0%, #c9c94f 100%);
background: linear-gradient(#dada55, #c9c94f);
-pie-background: linear-gradient(#dada55, #c9c94f);
behavior: url(/behaviors/;

This works fine in IE6, IE7 and IE8 in compatibility mode, but when viewed in IE8 regular mode, the table headers have no background at all. I've tried adding position: relative and switching the gradient to the <tr> instead, but I can't get it to work. Any ideas?

taf2 commented Jul 19, 2011

I'm seeing the same issue with linear gradient on anchor and input elements. So, far the main difference I can tell is in drawBgImages, the shape created by
shape = this.getShape( 'bgImage' + i, 'fill', this.getBox(), 2 );

is logged as an [object] in IE6, IE7, IE8 Compat, but as a [object HTMLGenericElement] in IE8 Standards.

I have a feeling the answer will be in this thread:

taf2 commented Jul 25, 2011

sorry no, i believe the issue here is IE doesn't treat table elements as normal elements, so you'd need to add another container element around the table... at least that's my understanding...


I'm experiencing the same issue. If I apply any css3pie styles to a tr (such as a gradient), the tr becomes invisible. Making the table's surrounding div position: relative; z-index: 1 had no effect. (The table, tbody and tr themselves are ignore position: relative in standards mode.)

I've been trying to emulate row gradients by positioning divs behind the rows; but I find that jQuery doesn't give me accurate position information for trs across all browsers either, making this task nigh-impossible.

Should it be possible to apply a gradient background to a tr or td, such that it works in IE8 Standards Mode? If so, can someone post a test case?

kfox112 commented Feb 28, 2013

For anyone who comes across this topic in the future, I was able to get around this by giving the table's parent element a position property of relative and a z-index of 1. See this page for details:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.