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

[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]

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]

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]

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