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


Tags: html,css,internet-explorer-9,border,gradient

Problem :

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.



Solution :

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.


    CSS Howto..

    how to make a title div center aligned

    How to make rounded corner cut-out using CSS?

    If I have 3 elements, how do I only allow one to be highlighted when clicked at any one time? - CSS, jQuery

    How to send CSS to the client using HTTP response headers?

    How can I display social media icons in a horizontal line instead of vertical row

    How to align image and text for my html/css

    How to make controlls for epub using HTML 5,JavaScript and CSS?

    How can I show hidden element when it has focus?

    how to center text vertically in html using css only

    How can I make a span stretch the available space between to other spans?

    How do check the Css properties for an element when pressed in Google Chrome Developer Tools

    How to figure out which lines of css is not actually affecting anything again?

    How to layout images in 3 columns [closed]

    How can I put my div “downloads” always 70px below my image

    CSS Ribbon - How to make a transparent triangle while disregarding background

    How to get similar style as JQuery UI website itself

    How to achieve the same background image effect made in other stack communities?

    How to create text block over the images with css and make it responsive

    How to modify your CSS working with Mobile Angular UI and Bootstrap

    how to include css and js files to php template?

    Only show wordpress featured image when shared on social media

    How to change font size of the first option tag in a dropdown menu (select)?

    jQuery How to select the only child of a
  • inside a class
  • How to edit css live with ie6

    How to generate width CSS from JavaScript / C#

    How to style (increase the height) of select box in CSS?

    Having css issues div ahref showing up behind others, domino effect

    How to set select box height in jquery moblie?

    How does this site hide the iframe scrollbar?

    How Do I Make My CSS Slider Auto Play? [closed]