This filter should allow you to add 2-color vertical gradients as background on IE8:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4a4a4a', endColorstr='#4e4e4e')";
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jensimmons’s picture

Status: Active » Closed (won't fix)

I've been very hesitant to use filters in a core theme. Lots of people don't like them / have performance concerns or whatever concerns. So..... won't fix.

jon841’s picture

Assigned: Unassigned » jon841

linear gradients on IE8 fix
Newbie here, is the code below CSS? and if so which bartik theme stylesheet and where would I place it?

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

Jon
Thank You

jensimmons’s picture

Project: Bartik » Drupal core
Version: 7.x-1.x-dev » 7.x-dev
Component: Browser Compatibility » Bartik theme
Assigned: jon841 » Unassigned
Category: feature » bug
Status: Closed (won't fix) » Active

Ok, I'm going to reopen this now. A lot more is known now (Jan 2011) about whether/not ms filters are a good idea. (Six months is a long time in the evolution of CSS3.)

Thoughts?

Jeff Burnz’s picture

Just needs testing, in my trials and tribulations these filters can have unexpected side effects, such as aliasing text (e.g. the site name or slogan) and other unwanted degradations. We see this "fix" parroted all over the web as the "CSS3" compatible way of adding linear gradients to IE but its never that simple. Needs testing.

amateescu’s picture

Title: Add support for linear gradients on IE8 » Add support for linear gradients on IE
Status: Active » Needs review
FileSize
61.23 KB
59.94 KB
62.09 KB
61.29 KB
87.24 KB
86.07 KB
930 bytes

I also used this tehnique for adding background gradients in IE with varied results, but they were mostly positive. Here is a patch that adds gradients in IE 6,7,8, tested with different colorization and everything looks great with no performance issues.

aspilicious’s picture

Text aliasing is a problem, but the effects are minimal don't you think?
IE8 doesn't seem to suffer a lot.

IE6 is dead and IE7 is dying: http://gs.statcounter.com/#browser_version-ww-monthly-200912-201012
+1 for me.

(I alrdy use this on a website of mine)

casey’s picture

aspilicious’s picture

In order to guarantee that users of both Internet Explorer 7 and 8 experience the filter, you can include both syntaxes listed above. Due to a peculiarity in our parser, you need to include the updated syntax first before the older syntax in order for the filter to work properly in Compatibility View (This is a known bug and will be fixed upon final release of IE8). Here is a CSS stylesheet example:

#transparentDiv {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;
}

Oh my god...

amateescu’s picture

True, true :)

Jeff Burnz’s picture

Whats the zoom: 1; for?

One interesting thing - if you apply these filters to HTML5 header element it works, until you scroll, then its "lost" and falls back to the fallback color, or nothing if one is not set. Something to think about for D8, as I assume we will need to think about HTML5 elements and how to support them, for now this is not really relevant, just interesting.

EDIT: actually I just added a DIV wrapper and its doing it with that also, so it must be something peculiar about this one specific theme (other themes this is working fine, including Bartik).

amateescu’s picture

Without zoom: 1 the gradient doesn't work in IE 6 and 7.

joshfromdallas’s picture

I have tried the above patches but to no avail, IE won't display Bartik correctly. Big bummer, anyone have any other ideas to try?

The theme looks so bad ass on the other browsers.

Marc Bijl’s picture

Allright, subscribing.

And a question.
I'm more a designer than a developer, and don't know a thing about filters and stuff. What's the best way for me to create a Bartik subtheme that looks good in Internet Explorer 7 and 8? Can I find an IE stylesheet (and if needed some images) somewhere that offers rounded corners and gradients in Bartik viewed by IE?

couturier’s picture

Subscribing. I hope a tested version of this code will come out in a future update to D7 core. If not, then we'll look for it in D8. For now, I worked with my Bartik coloring to get combinations that will look good when IE9 doesn't show a gradient, and I hope that more people will continue switching to other browsers. Note in the latest W3 Schools browser use statistics that IE is steadily losing popularity to Chrome.

couturier’s picture

Thank you, @amateescu! I applied the given patch, and it works beautifully for IE 8 and 9. I was not able to test in IE 7. Text aliasing, if it is present, is not noticeable. The Opera browser Version 10.63 still does not support CSS gradients, even with this patch. For other newbies out there like myself, I wanted to explain about manually applying the patch for IE. First, view the full patch in the above Post #9. The first alteration takes place in the colors.css file around line 26. Add two new lines at the bottom of the section indicated in the patch. The new lines should have the plus marks removed when adding. So, the new final section will look like this:

#header {
background-color: #48a9e4;
background-image: -moz-linear-gradient(top, #0779bf 0%, #48a9e4 100%);
background-image: -ms-linear-gradient(top, #0779bf 0%, #48a9e4 100%);
background-image: -o-linear-gradient(top, #0779bf 0%, #48a9e4 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0779bf), color-stop(1, #48a9e4));
background-image: -webkit-linear-gradient(top, #0779bf 0%, #48a9e4 100%);
background-image: linear-gradient(top, #0779bf 0%, #48a9e4 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0779bf', endColorstr='#48a9e4')";
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#0779bf,endColorstr=#48a9e4,GradientType=0);
}

Then, the second change takes place in the ie.css file, adding only to line 1 so that the section displays as follows:

#header,
.block {
zoom: 1;
}

This worked for me. If I've not applied this correctly in some way, I would appreciate a comment from a more experienced person. Additional help in applying patches and explanation of other markings in the patch code may be found at http://drupal.org/node/34422. Thanks again for the patch. It makes a big difference from a design perspective of what can be done with the header colors to be acceptable across all the major browsers.

spineless’s picture

Well this did not very well for me.

When I attempted to apply the patch using the following git command:

git -v 844728-bartik_ie_gradients-9.patch

I then got the following errors.

Checking patch bartik/css/colors.css....
error; while searching for:
  background-color;#48a9e4;
  background-image: -webkit-gradient(linear, 0%, 0%, 0%, 100%, from(#0779bf), to(#48a9e4));
  background-image: -moz-linear-gradient(-90deg, #0779bf, #48a934);
}
a{
  color: #0071B3;

error:patch failed:bartik/css/colors.css:26
error: bartik/css/colors.css: patch does not apply
Checking patch bartik/css/ie.css...
error: while searching for:
/* $ID: ie.css,v 1.12 2011/01/04 02:59:37 webchick Exp $ */
.block{
  zoom:1;
}

error: patch failed: bartik/css/ie.css:1
error: bartik/css/ie.css: patch does not apply

So... I then attempted to manually change the files as mention in #15 above (posted by couturier) but i did not see the changes in IE9.

Any idea what might be going on?

couturier’s picture

Be sure you have flushed all caches, including in your IE9 browser. Flush the caches in Drupal under Configuration > Performance. If your server has any code cache installed, like APC, then you must be sure your code caches are also flushed. Sometimes the browser itself will retain a cache, so that is why it is imperative to flush the cache within IE9 itself. Finally, if all of that does not work, go over your code line by line to make sure that the code has been correctly modified down to every precise semicolon. One misplaced character can bring down the whole code, as you know. Then, repeat the flushing of all caches. If that does not work, let us know.

spineless’s picture

Thanks for your help.

All I needed to do was flush the IE9 history.

Spineless

bleen’s picture

Relevant: IE7 is no longer supported (#1217788: Drop IE7 support in Drupal core) ... developers rejoice

droplet’s picture

Version: 7.x-dev » 8.x-dev
Issue tags: +IE, +Novice, +Needs manual testing, +Needs backport to D7

didn't test it. theoretically, patch looks good.

tagging

Jeff Burnz’s picture

Since the patch is for D8 we can drop the IE7 syntax for now, if this ever backports we can add it back in.

harriska2’s picture

Does the patch still work for D7? I've applied it, cleared D7 cache and IE9 caches and it still doesn't work...

couturier’s picture

Does your server utilize any code caches that must be cleared? I'm still using this patch quite successfully for D7. Did you apply both patches? The ie.css and the colors.css files both require changes. See comment #15 above.

harriska2’s picture

Yep, applied both patches. No, I'm on a VSP and it doesn't cache. I'm sure I'm missing something here. I'll go over the code again. Thanks, couturier, for the idea...

jensimmons’s picture

Status: Needs review » Closed (works as designed)

I don't see a need to do this. It's fine for IE 6–9 to have a solid color as the background of the header. Not having a gradient is not a bug — it's a natural effect of the evolution of the web. IE10 supports gradients just fine, and if Microsoft succeeds in speeding up their browser release cycle, IE11 or 12 could be the current version of the browser when Drupal 8 comes out. People are upgrading their browsers more quickly these days. Adding a filter hack for increasingly old versions of IE doesn't seem like a priority that matches the other choices being made for Drupal core. If it were broken, of course we'd want to support a fix. But it's not broken. It's just different. I'd like to set this to won't fix.

couturier’s picture

That's fine if you don't want to change core to fix this, but I still think it is helpful for people who want to add it to know how to do it, probably through the information in this thread. My site is a fashion design site http://fashionbelle.com and I've reversed the normal sequence of tones so the header blends from white at the top to a pastel color at the bottom with black text in the header. To default to no gradient looks really bad, washing the header area with way more color than is intended, and you'd be amazed at how many people out there are using IE and running older computers, not just at home but also at public libraries and hotel lobby computers. The upgrade cycle for the whole of the population will take a few more years. Nevertheless, I understand the reasoning behind going forward without making backward fixes. If we do too much looking backward, we lose precious time needed for developing for the future of the web.

As for other fixes, I would definitely like to see some type of image float brought into Bartik for Drupal 8. I had to add this manually, and I cannot imagine anyone not wanting images floated for this core theme. Also, it would be nice to have a UI option for black text on a color background in both the header and footer areas. Because my site was graphics heavy, I had to switch the CSS to allow for a pastel colored backgrounds with black text. Using dark colors to accommodate white text in those areas overwhelmed my other graphics. Thanks for all your work on this fabulous theme. I love it.

the_lemon’s picture

Version: 8.x-dev » 7.15
Category: bug » task
Status: Closed (works as designed) » Fixed

I attempted the patch as given above by amateescu (#9), with no results. I knew I was close, but couldn't get the results I sought for Bartik w/IE9.

After studying the strings provided in the patch, I discovered an inconsistency. In my case, I had to modify the strings slightly:

ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0779bf', endColorstr='#48a9e4')";
filter: "progid:DXImageTransform.Microsoft.gradient enabled='true',startColorstr=#0779bf,endColorstr=#48a9e4,GradientType=0)";

This is for the 'colors.css' file in Bartik. I hope this helps someone.

-JH

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

artatum’s picture

for those who still have problem with the edits :
dont forget Bartik is dynamic and /themes/bartik... color.css is only the 'template' for the real color.css which is ...
into sites/default/files/bartikXXXX9999
in IE9 this single line in #header (L35)did the trick for me:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#840137,endColorstr=#0c090a);
So each time you change the colors with the widget into the Bartik theme admin you'll need to edit this file which will be destroyed and rebuilt ...

pitbull mix’s picture

I agree with artatum in post #29. Today I noticed the IE did not render gradient from my sub theme of bartik. I used the above patch in the main portion of the theme, but also had to add to sites/default/files/color/subbartik. Now both IE 9 and Firefox are working, but have not checked chrome yet.