IE9 does what he wants?

I have a website with a drop-down menu and I'm using chosen for a nice look.

It looks in every browser the same (hoover = gray background) except for IE9.

Tests were made with BrowserStack

ASP.NET code:

<select data-placeholder="Select some tags" class="chzn-select" multiple style="width: 350px;" tabindex="4">
 <option value=""></option>
 <option value="Online">Online</option>
 <option value="Offline">Offline</option>
 <option value="Registered">Registered</option>
 <option value="Unregistered">Unregistered</option>
</select>

CSS code:

.chzn-container .chzn-results .highlighted {
  background-color: #aaa;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#999', GradientType=0 );  
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #aaa), color-stop(90%, #999));
  background-image: -webkit-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: -moz-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: -o-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: linear-gradient(#aaa 20%, #999 90%);
  color: #fff;
}

.chzn-container .chzn-results .highlighted em {
  background: transparent;
}

Looks like IE9 isn't getting the attributes..

But why? Visual Studio 2012 tells me IE is compatible with these parameters.

I appreciate all hints, thanks!

Answers


Internet Explorer 8 and 9 have CSS2.1 compliant filter strings for this:

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaa', endColorstr='#999', GradientType=0);";

Edit:

I have been looking into this more and it looks like IE9 does not support gradients with DirectX filters.

However, with a bit of playing around, you can get them to work with a combination of data URIs and SVG:

SVG Image to emulate the gradient background:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="20%" stop-color="#aaa" stop-opacity="1"/>
            <stop offset="90%" stop-color="#999" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#linear-gradient)"/>
</svg>

Which leads to the following CSS:

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+DQogICAgPGRlZnM+DQogICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+DQogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2FhYSIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzk5OSIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPC9kZWZzPg0KICAgIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50KSIvPg0KPC9zdmc+");

An example jsFiddle is provided.


The Ultimate CSS Gradient Generator helped me with my problem.

My code looks now like this:

.chzn-container .chzn-results .highlighted {
    background-color: #aaa;
    background: -moz-linear-gradient(top,  rgba(102,102,102,1) 0%, rgba(153,153,153,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,102,102,1)), color-stop(100%,rgba(153,153,153,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(102,102,102,1) 0%,rgba(153,153,153,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(102,102,102,1) 0%,rgba(153,153,153,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(102,102,102,1) 0%,rgba(153,153,153,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(102,102,102,1) 0%,rgba(153,153,153,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#999999',GradientType=0 ); /* IE6-8 */
    color: #fff; 
}

This worked perfectly !


The MS (IE < 10) specific styles should come be the last.

Instead of:

.chzn-container .chzn-results .highlighted {
  background-color: #aaa;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#999', GradientType=0 );  
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #aaa), color-stop(90%, #999));
  background-image: -webkit-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: -moz-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: -o-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: linear-gradient(#aaa 20%, #999 90%);
  color: #fff;
}

The order should be:

.chzn-container .chzn-results .highlighted {
  background-color: #aaa;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #aaa), color-stop(90%, #999));
  background-image: -webkit-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: -moz-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: -o-linear-gradient(top, #aaa 20%, #999 90%);
  background-image: linear-gradient(#aaa 20%, #999 90%);
  color: #fff;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#999', GradientType=0 );  
}

Need Your Help

Exporting Multiple Tracks: AVMutableComposition and AVAssetExportSession

ios avfoundation avassetexportsession avmutablecomposition avasset

I have 4 videos files which I have edited and added to a mutable composition. I am trying to use the export session to export the files, however, when I am exporting, only the first track in the li...

Full screen mode in silverlight

asp.net silverlight

Would it be possible to show an image in full screen mode using silverlight. I'm looking out for some thing like the full screen option of the flash video players.