ie10/ie11 gradient not working correctly


Please visit this link

The gradient does not appear correctly in the first row of the table. If I can’t do the gradient, is there a way to code some CSS such that the first row is just a solid color? (blue)?


Oh… should me more specific… See below

If I can’t do the gradient in ie, is there a way to code some CSS such that the first row is just a solid color ONLY for ie10/11? (blue)?


You have this broken code in your page:

.CSSTableGenerator tr:first-child td {
	background:-o-linear-gradient(bottom, #4d6e88 5%, #2e4054 100%);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4d6e88), color-stop(1, #2e4054) );
	background:-moz-linear-gradient( center top, #4d6e88 5%, #2e4054 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4d6e88", endColorstr="#2e4054");
	background: -o-linear-gradient(top, #4d6e88,[B] 2e4054[/B]);
[B]</p> <p>[/B] background-color:#4d6e88;
	border:0px solid #ffffff;
	border-width:0px 0px 1px 1px;

You have a stray p tag in your CSS ?

It’s in a couple of rules like that and is killing the background colour for browsers that don’t understand linear gradients. Go through the code and remove all instances of the p tag from the css.

The latter opera rule is missing the # from the color.

There are no rules for IE9 and 10 (i.e. -ms-linear-gradient etc).

There is no unprefixed rule at all. This means that if pre-fixes are dropped by the browsers you will end up with no styles. Always use the real rule last in sequence.

e.g.fix the above code and then add these rules last in sequence.

background: -ms-linear-gradient(bottom, #4d6e88 5%, #2e4054 100%);
background: linear-gradient(to bottom, #4d6e88 5%, #2e4054 100%);

I would consider dropping the IE proprietary filter as that causes more problems than it fixes and just use a solid colour for IE9 and under.

Use a CSS generator to check create your rules more easily.