CODEWITHSUNDEEP
css
user2869777
user2869777

Reputation: 15

css not working in chrome and IE

I am new for html and css. Here Is My css code:

background: -moz-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);

this background color effect not working in IE and Chrome How to change this code to work.

Upvotes: 0

Views: 100

Answers (6)

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

-moz is a prefix for Mozilla Firefox, please check this site: http://colorzilla.com/gradient-editor/ and look through the code and comments:

background: #1e5799; /* Old browsers */  
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */

Upvotes: 0

Bishan
Bishan

Reputation: 15740

-moz-linear-gradient is for Mozilla Browser(Firefox). You should use webkit-linear-gradient for chrome.

Upvotes: 0

T3 H40
T3 H40

Reputation: 2436

The -moz- prefix is only used by Firefox - so you need to copy the exact line to use in the other browser-familys:

background: linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -o-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324800

Vendor prefixes are no longer needed for gradients.

background: linear-gradient(to bottom, #F9F9F9, #F0F0F0);

Done.

Upvotes: 2

Jonathan
Jonathan

Reputation: 773

Check the documentation https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient. It depends on javascript engine used by browsers.

As it states the doc for crossbrowser:

.grad { 
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ 
    background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */

}

Upvotes: 0

Dave
Dave

Reputation: 8471

You are doing a gradient only for Mozilla, you need to do it for IE and Chrome separately

Please check this site out as it will do the code for you but, provide comments so you get an idea how each browser responds to each line of code

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

Example code

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Upvotes: 0

Related Questions