How to maintain browser compatability with Gradient in css? - html

Question

I am developing a website using html , css and javascript . The buttons display differently in every browser . Here are the screenshots for different browser of the same page :
Internet Explorer :
Firefox :
I actually intend it to display as it displays in firefox . Here Some of the css code i am using :
#button{
float: left;
width: 500px;
height: 50px;
line-height: 50px;
background-color: #06C;
padding-left: 20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #60B842),
color-stop(0.85, #7FD13D)
);
background-image: -moz-linear-gradient(
center bottom,
/* change these to change the button colors */
#B58515 0%,
#DC9E1F 85%
);
/* change this to change the text color and font type */
color:#fff;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
text-shadow:1px 1px 1px #4c9434;
}
#button:hover{
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #6DD14B),
color-stop(0.85, #85DB40)
);
background-image: -moz-linear-gradient(
center bottom,
/* change these colors to change the mouse hover colors */
#E17100 0%,
#FF9326 85%
);
box-shadow:0 2px 0 #5EA839;
}
There maybe some issues with using the gradient . Can someone suggest me any changes or another ways to code so that the webpage looks the same in different browsers ?

Answer 1

I usually use Colorzilla's Ultimate CSS Gradient Generator to generate cross browser CSS gradient code.

Answer 2

Apart from -webkit-gradient() and -moz-gradient() you also need to use the prefixes for IE and other browsers.
Example:
#linearBg2 {
/* fallback */
background-color: #1a82f7;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);
}
Source
Read more here
Note that IE 9 and earlier do not support gradient.

Answer 3

What's happening is that IE ignores your gradient css completely. You have to add a 'filter' in order for the gradient to appear in IE.
This page will help you create a cross-browser gradient.

Answer 4

All browser Support gradient property
use this
background: -moz-linear-gradient(top, white, #1a82f7);/*Mozila*/
background: -o-linear-gradient(top, white, #1a82f7); /*opera*/
background: -webkit-linear-gradient(top, white, #1a82f7);/*Chrome and safari*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#1a82f7'); /*IE*/

Answer 5

Here is a set of CSS gradients that will be useful for you for cross-browser compatibility:
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);