Background Gradients in IE7 with CSS

background gradients in IE7 with CSS

In IE<=7, filters won't work unless element has layout.

zoom: 1;

Be aware that it can break other things, so old good background-image might be safe and reliable solution.

Also please note that your CSS lacks gradient properties for Opera, IE10 and updated syntax for Webkit.

Gradient colors in Internet Explorer

Look at the custom CSS filters IE can handle
http://msdn.microsoft.com/en-us/library/ms532847.aspx

CSS: How to set up gradient background cross browser (only missing IE8 and IE9)

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0002b0fd', endColorstr='#028dca',GradientType=0 );

will give you IE6-9.

Using: http://www.colorzilla.com/gradient-editor/

Gradients in Internet Explorer 9

You still need to use their proprietary filters as of IE9 beta 1.

Linear Gradient background in IE 7 - 9

Your hex values are wrong for the IE6-9 part:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bf00', endColorstr='#009400',GradientType=0 ); /* IE6-9 */

Background image gradient not working with ie9

This is pretty close:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff6900', endColorstr='#ff8214',GradientType=0 );

This works in IE6+.

Or, for JUST IE9, you can replace it with an SVG by using the following styles, if the filter option doesn't float your boat:

Add to .orangeback:

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNjkwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjgyMTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

Also add .ie9-gradient class to these elements, and add the following before the closing head tag:

<!--[if gte IE 9]>
<style type="text/css">
.ie9-gradient {
filter: none;
}
</style>
<![endif]-->

To use the SVG polyfill for CSS3 gradients in IE9 you need to disable filter, so this code retains the filter gradient fallback for IE6-8 and uses SVG for IE9.

In your case, there is not really a need to use the SVG polyfill for IE9 because you are using a normal 2 color linear gradient. If you had a more complex gradient the second solution would probably be preferable, but for your purposes just using the filter solution should work fine.

Use this (or a CSS preprocessor) and never worry about CSS3 gradients again: Colorzilla Gradient Generator



Related Topics



Leave a reply



Submit