Table Header borders disappearing in IE8 with gradient background

My tables are causing problems in IE8. I can not get the dividing borders in the table header to appear above the gradient (except for in one spot, which you can see in the image below). The borders appear fine in every other browser and even in IE8 Compatibility Mode. Any ideas on how to fix this? Here is a test site for everyone to see the applied code.

Here is the table header's CSS, but you can view the entire CSS file here:

.gridview th {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSI1MCUiIHkxPSIxMDAlIiB4Mj0iNTAlIiB5Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNTM4MyIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhmZDlmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+);
    background-image: -webkit-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
    background-image: -moz-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
    background-image: -o-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
    background-image: -ms-linear-gradient(90deg, #005383 0%, #90d9ff 100%);
    background-image: linear-gradient(90deg, #005383 0%, #90d9ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90d9ff, endColorstr=#005383);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#90d9ff, endColorstr=#005383)";
    background-color: #005383;
    line-height: 18px;
    vertical-align: top;
    padding: 4px;
    font-weight: bold;
    text-align: center;
    border-left: 1px solid #005580;
    color: #fff;
}

Answers


I tried solving your problem but but could not. I see that this occurs in both IE8 and IE9 doc and browser mode. Not in IE 7 however. But when using only

 background-image: url(data:image/.......);

the borders work in IE9...that only leaves IE 8 to solve. You can use IE7 and IE9 specific conditional commentsa to use above code(for IE9) and the

filter: progid:DXImageTransform.Microsoft

for IE7. With regard to the problem in IE8, here is a similar post:

Table cell loses border when css gradient filter is applied in IE8


Need Your Help

Watch file(s) for modifications algorithm

language-agnostic operating-system filesystems

I was simply wondering how file watching algorithms are implemented. For instance, let's say I want to apply a filter (i.e., search/replace a string) to a file every time it is modified, what techn...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.