How to show borders of th elements with gradient fills in IE9?

Question

I want the header cells of a table to have a specific border color and gradient fill. I want it to look like this:

enter image description here

Here is the html for the above:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>Column00</th>
                <th>Column01</th>
                <th>Column02</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Feline</td>
                <td>Cat</td>
                <td>Felidae</td>
            </tr>
            <tr>
                <td>Canine</td>
                <td>Dog</td>
                <td>Caninae</td>
            </tr>
            <tr>
                <td>Primate</td>
                <td>Ape</td>
                <td>Primates</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

And here's the css:

table{
    border-collapse: collapse;
}

th{
    border: 3px #449944 solid;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#44bb44'); /* IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#44bb44)); /* Chrome */
    background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(85,205,85, 1));
}

It displays perfectly in Chrome 12 and Firefox 5, but in IE 9 it looks like this:

enter image description here

It looks like IE9 puts the gradient fill on top of the borders. How do I get IE9 to display the TH elements' borders "on top"?

TIA.

It might be a border-collapse issue. Try `th{ border-collapse: no-collapse;` — Kyle, Jul 06 '11 at 14:53
@Kyle Sevenoaks: tried your suggestion and it doesn't seem to affect anything... — , Jul 06 '11 at 14:56
@user639175: "...but border on TH element must also be set". I have already set the TH element's border width, color and style. Is there some other property that I should be setting? — , Jul 06 '11 at 15:03
@cfouche: Is it only IE9 that you care about? Does IE8 or lower matter? — thirtydot, Jul 06 '11 at 15:13

score 1 · Answer 1 · answered Mar 04 '13 at 21:28

1

http://msdn.microsoft.com/en-us/library/ie/jj127314(v=vs.85).aspx

"padding-box:The background is painted within (clipped to) the padding box." Setting the background clip property on your TH to "padding-box" should do the trick

answered Mar 04 '13 at 21:28

asherrard

683
1
8
11

score 1 · Accepted Answer · edited May 23 '17 at 12:07

It seems that this is a well-known bug (?) in IE9: gradient backgrounds "overflow" borders. This is especially noticeable when one uses rounded corners with gradient fills (these display perfectly in Chrome and FF, but in IE the gradient fills stretch outside the rounded corners). See the answer to this SO question: IE9 border-radius and background gradient bleeding.

The most simple solution for the moment is to use the good ol' background image of a gradient fill repeated in the x-direction for IE, like so:

table{
    border-collapse: collapse;
}

th{
    border: 3px #449944 solid;
    background-image: url('greenGradient.png');
    background-repeat: repeat-x;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#44bb44)); /* Chrome */
    background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(85,205,85, 1));
}

Then IE behaves and displays borders "on top" and the background fill stays inside the borders, as one would expect.

Thanks cfouche worked like a charm. Can't believe IE9 would render filters that way. Still a far way to go... — Jacques, Nov 06 '12 at 14:56

score 0 · Answer 3 · answered Jul 06 '11 at 15:12

0

it is border-collapse on TABLE element, then border-width ...

answered Jul 06 '11 at 15:12

MikeyKennethR

600
4
16

Hi - I've tried setting border-collapse to no-collapse on the TABLE element and then setting the border width on the TABLE and the TH elements in all possible combinations that make sense to me and I still couldn't get the appearance of the first image I posted in my question. Am I understanding your suggestion correctly? – Jul 06 '11 at 15:41
Yep - sorry i did not help - I will do a lab on this during the day ... get back to you :) – MikeyKennethR Jul 07 '11 at 09:44

How to show borders of th elements with gradient fills in IE9?

3 Answers3