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

How to enable large page memory for the JVM?

jboss

In the document(jbossperformancetuning.pdf), it suggest us to enable large page memory for the JVM.

any way to remove those Array ( => '… ' )?

php html arrays

I display the array into a table but those Array ( [0] => ' [1] => [2] => ' [3] => '..... ' ) still remained...is there any way to remove them?

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.