Cell border not showing in IE9 when filter gradient is applied to cells
I am creating a grid list using a CSS gradient applied in the title bar i.e. on the first line. The border also applies.
Before applying the Gradient filter, the border is displayed in all browsers, but after applying the Gradient filter, IE hides the border! Other browsers are fine.
CSS code below:
.list tr.titlerow, .list .titlerow th {
border: 1px solid #a0a0a0;
height:25px;
padding:2px;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EBEBEB', endColorstr='#ffffff');/*For IE7-8-9*/
background: -moz-linear-gradient(top, #EBEBEB 0%, #fff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EBEBEB), color-stop(100%,#fff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* Chrome10+,Safari5.1+ */
background: -ms-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* IE10+ */
background: -o-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* Chrome10+,Safari5.1+ */
}
Can anyone help me fix this?
+3
source to share
3 answers
IE filters can often mess up other things completely for no good reason. Sometimes applying one filter kills another filter - they don't even play well with each other, let alone proper CSS!
Instead of using a filter and trying to do things right, I'll just go back to the graphical gradient for IE using conditional comments or some other similar mechanism.
+4
source to share
Try this like this: -
.list tr.titlerow, .list .titlerow th
{
border: 1px solid #a0a0a0;
height:25px;
padding:2px;
background: -moz-linear-gradient(top, #EBEBEB 0%, #fff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EBEBEB), color-stop(100%,#fff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* Chrome10+,Safari5.1+ */
background: -ms-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* IE10+ */
background: -o-linear-gradient(top, #EBEBEB 0%,#fff 100%); /* Chrome10+,Safari5.1+
*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EBEBEB', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EBEBEB', endColorstr='#ffffff')"; /* IE8 */
}
+2
source to share
Just add position: relative;
.container
{
display: table;
background-color: lightblue;
border-spacing: 5px 0;
}
.container > a
{
display: table-cell;
width: 60px;
height: 25px;
border-style: solid;
border-width: 1px;
border-color:#adae9c;
background: #e4e7dd; /* Old browsers */
background: -moz-linear-gradient(top, #fefefe 0%, #e4e7dd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#e4e7dd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefefe 0%,#e4e7dd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefefe 0%,#e4e7dd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fefefe 0%,#e4e7dd 100%); /* IE10+ */
background: linear-gradient(to bottom, #fefefe 0%,#e4e7dd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe',endColorstr='#e4e7dd',GradientType=0 ); /* IE6-9 */
/*get around bug with IE9 that won't render the border if combined with table-cell and using a filter*/
position: relative;
}
<div class='container'>
<a>test1</a>
<a>test2</a>
</div>
+1
source to share