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
How to Center Variable Width Divs in CSS
CSS Floats, Change Order on Mobile Layout
Why Do Anchor Pseudo-Classes A:Link, :Visited, :Hover, :Active Need to Be in Correct Order
Css3 Box Shadow on Top, Left, and Right Only
Angular 2 Animation VS CSS Animation - When to Use What
Make Overlay Background Click-Through-Able
CSS Rotation with Respect to a Reference Point
Negative Top Margin Not Working in Ie 8 or 9
Adding Custom CSS Tags to an Rmarkdown HTML Document
Css3 Animation Is Not Working in Ie11 But Works in Other Browsers