Detail row grid->unexpected css behavior in IE10

[HUA]

Dear Kendo Team,
I've created detail row grid with specific css (see below).
This works properly on Chrome, Firefox, but on IE10, only the second lines are taken the right css style....(see file attached)
Could you provide us a solution for this issue?
Thanks in advance
Kind regards.

.k-grid table tr:hover

{

    background: #ffb76b; /* Old browsers */

    /* IE9 SVG, needs conditional override of 'filter' to 'none' */

    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYjc2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmE3M2QiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmY3YzAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmN2YwNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

    background: -moz-linear-gradient(top, #ffb76b 0%, #ffa73d 100%, #ff7c00 100%, #ff7f04 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(100%,#ffa73d), color-stop(100%,#ff7c00), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top, #ffb76b 0%,#ffa73d 100%,#ff7c00 100%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top, #ffb76b 0%,#ffa73d 100%,#ff7c00 100%,#ff7f04 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top, #ffb76b 0%,#ffa73d 100%,#ff7c00 100%,#ff7f04 100%); /* IE10+ */

    background: linear-gradient(to bottom, #ffb76b 0%,#ffa73d 100%,#ff7c00 100%,#ff7f04 100%); /* W3C */

     cursor:pointer;

}



[Dimo]

Hello Thomas,

The following demo seems to work as expected. Am I missing something?

http://jsfiddle.net/dimodi/Hjrav/

Regards,
Dimo
the Telerik team

[HUA]

Hi Dimo,
Thanks for you reply
this works properly in my side too if I display a simple grid.
And it works fine also in chrome and firefox with a detail grid.
But it seems it does not run as expected in IE10, with a detail grid (as you can see in my first post, in the attached files )
Kinds regards

[Dimo]

Hi Thomas,

Now I see. Based on my tests, I can conclude that the observed problem is a browser limitation (or a "feature"), namely, two linear gradients cannot be displayed one on top of the other, unless the top element has some background color to separate the two gradients.

You can either add some background color to the detail rows or change your selector to:

.k-grid  table  tr:not(.k-detail-row):hover
{
    /* ... */
}

Regards,
Dimo
the Telerik team

[HUA]

It works :)
Thanks a lot!
Kinds regards