menu gradiant effects not showing in IE Twenty eleven

jtbear
(@jtbear)

12 years, 2 months ago

Anyone have a solution ? the gradiant effects wont show on my menu in internet explorer, theme twenty eleven.
Works fine on other browsers

Viewing 8 replies - 1 through 8 (of 8 total)

Digital Raindrops
(@adeptris)

12 years, 2 months ago

The gradiants and box shadows etc: only work with compatable browsers, open your website in IE9, press F12 and you can test and view the different compatibilty views there.

HTH

David

Thread Starter jtbear
(@jtbear)

12 years, 2 months ago

but i cant expect users to switch different compatibilty modes, is there a way to fix it ?

Thread Starter jtbear
(@jtbear)

12 years, 2 months ago

found the solution.
just add this to the css and it should work on IE browsers

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#252525′, endColorstr=’#000000′);

DAGCAS-WEB
(@dagcas-web)

12 years, 1 month ago

this hasnt helped me and i really need it compatable on all browsers

the Workshop
(@the-workshop)

12 years ago

I recently found a trick that might work. I had a client who demanded it look the same in all browsers and have a gradient. Try making a “sprite” .jpg for the link and hover state. Next you have to tweak the css so that IE reads it.

I wound up making a 40px by 10px sprite and uploading it to the media, coping the address and writing the additional code….so for the menu, ul li:link {background:url(wherever it is in the media.jpg) repeat-x center top\9; /* IE 8 and below */}
and then for the hover state the menu background is “center bottom”

Two things to note to get this to work in IE without needing the compatibility mode.
1) you need to add a strict doc type in the header, not the short php version. This stops IE from going into quirks mode.
2) I installed the “PC Custom CSS” plugin and added the code for the IE there.

Might not be the best solution, other then banning IE all together but this actually took care of a lot of issues with the site in all versions of IE.
jsarvey
(@jsarvey)

11 years, 8 months ago
Where should one add the suggested code?
```
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#252525', endColorstr='#000000');
```
jsarvey
(@jsarvey)

11 years, 8 months ago

Never mind re my last question. I see that that code is already contained within TwentyEleven’s CSS.
jsarvey
(@jsarvey)

11 years, 8 months ago
I found a great website which FINALLY provides the comprehensive answer for solving the browser issue with gradients. I can’t believe how many crappy answers I had to wade through to find it. jtBear gave part of the solution above.

First, here’s the webpage with what I find to be the best answer:
http://webdesign.about.com/od/css3tutorials/ss/css3-linear-gradients.htm

On this page, they provide all of the additional codes that you might need to insert in order for the most common browsers to display your website correctly.

First, they show the code for different versions of IE:
```
/* IE 5.5–7 */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff', GradientType=1);
 /* IE 8–9 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#ffffff', GradientType=1)";
 /* IE 10 */
 -ms-linear-gradient(left, #999999 0%, #ffffff 100%);
```
After showing that for a number of other browsers, they then show what it would actually look like in your CSS:
```
background: #999999;
 background: -moz-linear-gradient(left, #999999 0%, #ffffff 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,#999999), color-stop(100%,#ffffff));
 background: -webkit-linear-gradient(left, #999999 0%, #ffffff 100%);
 background: -o-linear-gradient(left, #999999 0%, #ffffff 100%);
 background: -ms-linear-gradient(left, #999999 0%, #ffffff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff',GradientType=1 );
 -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#ffffff',GradientType=1 );
 background: linear-gradient(left, #999999 0%, #ffffff 100%);
```