CSS linear gradients not working on live server (IE only), fine on localhost

Question

I have just rolled out a new Intranet that ive been working on for some time. All is good (apart from the inevitable user-centric issues and a couple of bugs)

However its just become apparent (now that i have a chance to actually look at the front end as opposed to hacking code to fix problems) that for some reason my css linear gradients arent working.

This is very odd to me, as when i view the same site in its test environment (localhost) the gradients work in all their glory. on the same PC, in the same browser (2 tabs open, one local, one external)

all other css (in the same style file) works fine.

#PageTitleBox{
position:absolute;
left:0px;
top:2px;
width:169px;
z-index:3;
padding-top:0px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
background-color:#A9D4CC;
background-image: -webkit-linear-gradient(180deg, #A9D4CC, #7DB4B3);
background-image: -moz-linear-gradient(180deg, #A9D4CC, #7DB4B3);
background-image: -o-linear-gradient(180deg, #A9D4CC, #7DB4B3);
background-image: linear-gradient(180deg, #A9D4CC, #7DB4B3);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#7DB4B3', endColorstr='#A9D4CC')";
height: 55px;}

sorry - the whole network is on IE9. the gradients work fine however in chrome, safari, firefox — Digital Lightcraft, Sep 28 '12 at 09:30
Could it be caching? IE has some rigid caching. Does it help if you change the name of the CSS file, or add some 'garbage' to make it unique: `` It will force IE to reload the file. — GolezTrol, Sep 28 '12 at 09:34
Has it switched to compatibility view? http://stackoverflow.com/questions/3726357/why-does-ie9-switch-to-compatibility-mode-on-my-website — Lee Kowalkowski, Sep 28 '12 at 09:40
@LeeKowalkowski - head, nail, hit..... :-) - if you do an answer i'll give you a correct answer mark — Digital Lightcraft, Sep 28 '12 at 09:53

score 1 · Accepted Answer · answered Sep 28 '12 at 09:59

1

OK. I reckon you may have IE9 switched to compatibility view. (http://stackoverflow.com/questions/3726357/why-does-ie9-switch-to-compatibility-mode-on-my-website).

You can include <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> in your HTML HEAD to instruct IE to not do this, or set the equivalent HTTP response header using the server.

IE might ignore this anyway if the reason is your live server is considered to be part of your Intranet Zone by IE. In which case you have to configure IE not to use Compatibility View for intranet sites, in the Compatibility View settings.

answered Sep 28 '12 at 09:59

Lee Kowalkowski

11,591
3
40
46

Spot on! it also explains why some of the other CSS was slightly altered, such as font sizes/weights - also just to add that in IE, press F12 (developer console) i selected "Browser mode: IE9", and "Document Mode: IE9 Standards" – Digital Lightcraft Sep 28 '12 at 10:04
Yes. It's also worth noting that when IE is in Compatibility View it is essentially an older version. Another consideration for this is to provide stylesheets included within IE conditional comments for those older browsers (if only to tidy things up a little - not to make it perfect), just so that any users stuck in Compatibility View aren't too badly affected. – Lee Kowalkowski Sep 28 '12 at 10:14

score 0 · Answer 2 · answered Sep 28 '12 at 09:44

0

You can set 'Enabled' property of the gradient object to true.

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='true', GradientType=1, startColorstr='#7DB4B3', endColorstr='#A9D4CC')";

answered Sep 28 '12 at 09:44

RVC

69
4

CSS linear gradients not working on live server (IE only), fine on localhost

2 Answers2