I need to have gradient backgrounds on my website for internet explorer. I know there is some kind of proprietry way of doing this:
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#20799d', EndColorStr='#5cb9df');
But this doesn't grok with border-radius (supported by IE8, at least), which my site uses all over the place.
How should I solve this? (Other than just not having gradient backgrounds on old versions of IE, I mean.)
There's a great library called CSS3PIE, which adds support to IE 6-7-8-9 for many of the CSS3 stuff you seem to be interested in.
I'm using it a lot, and it's never let me down (although it does have its quirks).
Related
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 :
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 :
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 .
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:
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.
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.
I work for a client who has masses of <a> elements on their site which use the same styling and reference the same class name.
The problem I have is the developer who worked on this project before me used CSS3 to style the element and completely ignored the fact IE7 and IE8, even though it was in the scope of the browser model and this issue is now apparent on hundreds of pages.
What I want to ask is what do you feel the best approach is to putting a suitable fix in place without effecting the markup? such as scripts which support border-radius, box-shadow, gradients etc.
Please don't come back answering about graceful degradation as this is not going to happen, I have already spoken to the client and they don't want to take that approach.
You can use a script to perform that "support" for you on clients using old IE versions!
Download script here.
This script allows CSS3 support for Internet Explorer 6, 7, and 8.
The web site link!
My favourite solution to this problem is CSS3 PIE. It's an HTC which brings
a nice selection of CSS3 features to IE 6-9.
Note: PIE uses absolutely positioned VML elements (in IE6-8) to support a variety of CSS3 features. This can cause issues like disappearing backgrounds/borders/etc. The fix is usually to use position: relative; on the affected element or it's parent. See the known-issues for more information (and other fixes).
I think there is no one solution but you can combine more than one solution, for example to border-radius you can use jquery corner:
http://jquery.malsup.com/corner/
modernizr can be a good tool too!
Do we require filter gradient ( filter: progid:DXImageTransform.Microsoft.gradient ()for IE only as it work on firefox without it?
Setting the below property in css gave me proper gradient effect on IE
#mainmenu .gradientfilterIE {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77D3F8', endColorstr='#3FA4D8',GradientType=0 );
}
But on Chrome and Firefox it works without it too.
This question is actually in continuation of Why Displaying different gradient color on IE but works perfectly on firefox and chrome?
The filter (and -ms-filter) CSS properties are only supported in Internet Explorer. They’re a Microsoft extension to CSS, and aren’t supported in any other browser
They’re the only non-image way to achieve gradients in Internet Explorer as of version 9 (although IE 10 should support CSS gradients in some form), so they’re required in IE if you want gradients without images.
(Although as #Jules notes, IE 9 does support both SVG images and embedded base-64 encoded images, so you can have gradients in IE 9 without separate image files).
Note that Microsoft’s gradient filter is a bit more limited than the various CSS gradient syntaxes, and SVG’s gradient syntax.
IE filters are not needed on any browser except IE.
Most other browsers support CSS, including CSS3 gradients
In my website, it looks great on any browser but Internet Explorer. I know that older versions Internet Explorer doesn't support CSS3, so I was wondering if there were equivalents in HTML to these methods: max-width:, border-radius:, box-shadow:, and transition:.
Any help would be appreciated.
For border-radius and box-shadow there is http://css3pie.com/ but that requires Javascript in IE. For a HTML only solution you have to use images, i guess.
You are asking for a way to get some of the newer features of CSS rendered in a browser that doesn't support CSS (or let's hope you are ignoring browsers that old and instead working with a browser version that do some CSS, but not enough for your tastes). Those browsers are outdated and you are not going to get it work just by avoiding css.
If you go far enough back, you may actually end up at a point in time when there were things that were possible in html weren't in css. However, it has been quite a while now that CSS is your best shot at getting things like that to work. If it doesn't work, it usually means that the browser doesn't support it at all, not that it doesn't support it through CSS.
Of course, you can work some magic and try to fake things with javascript, but it just isn't the same.
I recommend using modernizr. It detects if a browser supports different css3 (and html5) features and, if it doesn't, you can conditionally load javascript as a fallback solution.
Internet Explorer 9 supports max-width, border-radius and box-shadow, but not transition.
Personally I don't think CSS should have transition (or animation) as styles should affect how content is displayed, not how it behaves (I am also against the behaviour IE extension for this reason).
Overall, these styles you are asking for are aesthetical, and shouldn't really be a major issue if they aren't supported by the browser your user is on.
I've already seen a lot of examples, but none of them work in safari.
For example:
https://jakearchibald.com/scratch/alphavid/
https://simpl.info/videoalpha/
http://www.sciencelifeny.com/transparency/transparency.html
Also I know about APNG but it is not supported in IE and Edge.
There is a seeThru library, but to work with it you need to create a mask. Is there a cross-browser solution?