linear gradient doesn't work in Firefox and IE here is my code:
body {
height: 100vh;
width:100%;
background:-webkit-linear-gradient( top, #f1f5f0, #739a65) ;
background:-moz-linear-gradient( top, #f1f5f, #739a65);
background:-o-linear-gradient( top, #f1f5f0,#739a65);
background:linear-gradient(to top, #f1f5f0,#739a65);
}
Update: I resolved it by using backgound-image:linear-gradient...
It seems you have FF3, and you haven't stated the IE version but linear gradients are/were only supported from FF3.6 and IE from IE10.
If possible, I'd suggest you upgrade to the latest version of both. FF3 is very old.
CanIUse.com
Related
I'm trying to render gradient and it's collor is different on safari and chrome. How to make it identical? (Left - chrome, right - safari).
https://codepen.io/max-frai/pen/XWMEQZJ
<div id="test"></div>
#test {
width: 400px;
height: 300px;
background: -webkit-linear-gradient(top, rgba(102,182,252,0) 0%,rgba(63,82,111,1) 100%);
background: linear-gradient(to bottom, rgba(102,182,252,0) 0%,rgba(63,82,111,1) 100%);
}
You can find a good explanation of what is going on here. Basically, this has been in the working draft for years now, and Safari is the only major player who hasn't fixed it. See current status here:
Partial support in Safari and Older Firefox versions refers to not
using premultiplied colors which results in unexpected behavior when
using the transparent keyword as advised by the spec.
I guess if you were desperate, you could calculate the gradient yourself and put in a lot of stop points. Otherwise just wait for Apple to fix.
I'm giving my a linear gradient but in Firefox, even new versions, what I get is something like bars of solid color building the gradient. This is what's in my CSS:
background-color: #d3d3d3;
background-repeat: repeat-x;
background: -moz-linear-gradient(top, rgba(145,145,142,1) 0%, rgba(253,253,253,1) 99%);
background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#fcfcfc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3',endColorstr='#fcfcfc');
background: -o-linear-gradient(rgb(211,211,211),rgb(253,253,253));
According to this, it is most unlikely you are facing a version problem. Firefox, as usual, was the first to implement a standards-compliant (no prefix) CSS property (and it has already been 9 versions back).
Try removing the background-repeat property as it is mostly useless for gradients unless you've set a background size. If it solves, I'd recommend posting a bug report on Bugzilla. Does it work well on IE10 and Chrome?
I'm hoping to achieve a cross browser gradient, if you inspect the anchor at the top right corner running inline with the branding of my mobile site it has been styled with the prefix moz for Firefox:
www.test-bed.co.uk/mobile/
background: -moz-linear-gradient(center top , #4A4A4A, #2C2C2C) repeat scroll 0 0 transparent;
May I ask is there is a similar way to achieve a cross browser gradient solution with the IE, Opera and webkit prefixes?
An online tool that automates CSS gradient rule generation for all modern browsers: little link.
But generically, here's the main syntax:
background: #color; /*fallback*/
background: -moz-linear-gradient(...);/*Firefox*/
background: -webkit-gradient(...);/*Chrome + Safari*/
background: -webkit-linear-gradient(...);/*Another Chrome + Safari*/
background: -o-linear-gradient(...); /*Opera*/
background: -ms-linear-gradient(...); /*IE10+*/
background: linear-gradient(...); /*W3C standards*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#color', endColorstr='#color',GradientType=0); /*IE6-9*/
Take a look at CSS3 Please. I personally like their indentation style.
.box-gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Firefox 16+, IE10, Opera 12.50+ */
}
As you can see, there is no -ms- prefix needed since IE10 supports the W3C syntax right away. Please make sure that you use the correct W3C syntax for linear-gradient()!
If you are using firefox as a browser. then you may want to use the addon called colorzilla. It is a nice tool that comes with options like Color picker, Eye Dropper, Pallette browser, CSS gradient generator, web page DOM code Analyzer , inspect Last element as well as zoom.
However you can generator css gradient'sat the folllowing link:
http://www.colorzilla.com/gradient-editor/
I am using the following bit of CSS to create a linear background gradient. It seems to work just fine in IE8/9, FF, Safari and chrome but not in IE7. IE7 shows a solid (green) background. Here is my code
.menu_body a {
display:block;
color:#006699;
background: #008800;
/* Mozilla: */
background: -moz-linear-gradient(top, #0b71a4, #025f8e);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#0b71a4), to(#025f8e));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#0b71a4', EndColorStr='#025f8e', GradientType=0);
padding: 1px 18px;
}
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.
The correct syntax is:
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#550000FF, endColorstr=#55FFFF00)
This is supported by IE4>
See the MSDN source here.
I'm unsure if the parameters of this transform are case sensitive - but seeing as most other CSS is, you could try:
startColorstr='#0b71a4', endColorstr='#025f8e'
Notice the lower-case starting character, and lower-case str suffix.
The following piece of code does not work on FF and Chrome but works on IE. I want to replace this part to make sure it works on all browsers.
Anybody, any idea?
Code below:
<td width="50%" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#163866,endColorStr=#8bc9f3); HEIGHT: 38px;">
td {
background: -webkit-gradient(linear, left top, left 38, from(#163866), to(#8bc9f3));
background: -moz-linear-gradient(top, #163866, #8bc9f3 38px);
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#163866,endColorStr=#8bc9f3)
height: 38px;
}
This will work in FF 3.6+, Safari 4+, Chrome, and IE 6+ (I think that supports gradient filters). Each browser will ignore the declarations it doesn't understand, so having all 3 will support all major browsers. Opera doesn't yet support gradients, instead use SVG (Scalable Vector Graphics)
Firefox Gradient documentation
Webkit (Safari/Chrome) Gradient documentation
Opera Gradients