Skip to content

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

Open
nrackleff opened this Issue May 25, 2011 · 4 comments

4 participants

@nrackleff

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/PIE.htc);
}

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
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: http://groups.google.com/group/google-excanvas/browse_thread/thread/8762ed1ede73509

@taf2
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...

@TrevorBurnham

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
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: http://css3pie.com/documentation/known-issues/#z-index

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.