1

I have been trying to apply CSS to a thin spacer that I have .

Normally for mozilla, the gradient that i have added is :

background: linear-gradient(to bottom, #ffffff 18%,#ecedeb 18%,#d1d5d0 100%);

This looks in mozilla like :

enter image description here

For IE , i added the following bit of code :

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d1d5d0',GradientType=0 );

And in IE this looks like :

enter image description here

As you can see from above , the spacer in IE is not a thick continuous red line, however, in mozilla it is so. Can somebody suggest as to how must i make the spacer in IE thick and continuous like in mozilla ?

EDIT : For the folks who are facing this problem, i have used CSSPIE3(PIE.js version 1.0) as per Spudley's suggestion to overcome this problem .

The Dark Knight
  • 5,455
  • 11
  • 54
  • 95
  • 1
    Just a heads up – these old filter properties are not very reliable/good. No one really used them until recently when we got first class gradients/opacity etc. I've never actually deployed them as I've always found they just aren't good enough. I've been using this http://www.bradshawenterprises.com/blog/2010/dynamically-drawing-gradients-with-php/ for the last 3 years instead. I just use it as a background image before the background code you have above. Old browser get png, new browsers get CSS. Easy :) – Rich Bradshaw Jul 11 '13 at 13:43
  • @RichBradshaw : Thanks let me have a look at that . Looked at the stuff you mentioned. Did not understand it properly . – The Dark Knight Jul 11 '13 at 13:44
  • Also, i was kinda looking to get a solution for the code that i have mentioned instead of having to write all the gradient stuff again . Thanks though for the info . – The Dark Knight Jul 11 '13 at 13:52

1 Answers1

2

There aren't any good solutions for gradients in old-IE -- it's just something that those old browsers simply don't do very well.

IE's old filter styles are well known for having major bugs and quirks. As you're finding, they're really not much fun to work with.

You have a couple of other options though:

  1. You could just drop the gradients for old IE versions. It's only a visual nicety, and won't affect the actual functionality of the site. Okay, so old IE users may not get the site looking quite as nice as people with newer browsers.... well, yeah, but you know what? They're on an old IE versions, so used to that by now; they can live with it.

    Creating a plain fall-back is easy. Simply specify a normal plain colour background style in the CSS immediately above your gradient background. Where there's a conflict, browsers will take the last one they understand, so modern browsers will take the gradient and old IE (and other old browsers if anyone's using them) will take the plain colour background.

  2. If you really do need the gradients, you could try using the CSS3Pie library. This is a little Javascript lib that tries to add a few standard CSS features to old IE versions, including CSS gradients. It works internally by using VML graphics, not filter styles, which means that you don't get the bugs that filter causes, so it might work better for you in this case than what you have.

Hope that helps.

Community
  • 1
  • 1
Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Thanks a lot for this one, i am gonna try this out and see if it yields positive results for me . – The Dark Knight Jul 11 '13 at 15:05
  • No worries. Hope it helps. My opinion is that option 1 is the pragmatic approach. But if you've got a boss who insists that his site must look the same in all browsers and can't understand the concept of old browsers not being as good, then option 2 (CSS3Pie) might save your bacon (it certainly did for me when I was in that position with rounded corners a few years ago). – Spudley Jul 11 '13 at 15:12
  • Thanks a lot for this one. It really helped . I went with the 2nd option. Deeply appreciated. Up voted and accepted. This one was an eye opener. Thanks again . – The Dark Knight Jul 12 '13 at 12:20
  • BTW, just out of curiosity : Is there any CDN from which i can load the PIE.js directly instead of downloading it and referring it in my local ? – The Dark Knight Jul 12 '13 at 12:44
  • @TheDarkKnight - I don't know of any CDNs, but when it comes to IE's `behavior` style, which is what PIE uses to do its magic, it's generally better to reference them locally, as you can issues if you try to use them cross-domain. I don't think the same applies to PIE.js (ie the pure JS version); but I've always used used the .htc version, so I'm not so sure. The good news is that PIE only needs to be loaded at all be old versions of IE, so most visitors won't ever download it; this means that even if it is on your server, it won't be too much of a burden on your bandwidth. – Spudley Jul 12 '13 at 19:07