Question

My gradient isn’t working in Safari for some reason. It works on all the other browsers including IE but not safari. Does anyone know the solution to this?

Thank you

#menuwrapper {
width: 100%;
height: 50px;
margin: 0;
clear: both;
background: #2c3a54; 
background: -moz-linear-gradient(left,  #1f2b42 2%, #2a3c5d 29%, #2a3c5d 70%, #1f2b42 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right top, color-stop(2%,#1f2b42), color-stop(29%,#2a3c5d), color-stop(70%,#2a3c5d), color-stop(100%,#1f2b42)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(left,  #1f2b42 2%,#2a3c5d 29%,#2a3c5d 70%,#1f2b42 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(left,  #1f2b42 2%,#2a3c5d 29%,#2a3c5d 70%,#1f2b42 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(left,  #1f2b42 2%,#2a3c5d 29%,#2a3c5d 70%,#1f2b42 100%); /* IE10+ */

background: linear-gradient(to right,  #1f2b42 2%,#2a3c5d 29%,#2a3c5d 70%,#1f2b42 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f2b42', endColorstr='#2a3c5d',GradientType=1 ); /* IE6-8 */
}

Answer 1

This works in Safari,

#gradient_background {
     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e4e4e4));
     background: -moz-linear-gradient(top, #ffffff, #038ec8);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e4e4e4);
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#e4e4e4)";
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #f7f7f7), color-stop(50%, #f7f7f7), color-stop(100%, #e4e4e4));
     background-image: -webkit-linear-gradient(top, #ffffff 0%, #f7f7f7 50%, #f7f7f7 50%, #e4e4e4 100%);
     background-image: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 50%, #f7f7f7 50%, #e4e4e4 100%);
     background-image: -ms-linear-gradient(top, #ffffff 0%, #f7f7f7 50%, #f7f7f7 50%, #e4e4e4 100%);
     background-image: -o-linear-gradient(top, #ffffff 0%, #f7f7f7 50%, #f7f7f7 50%, #e4e4e4 100%);
     background-image: linear-gradient(top, #ffffff 0%, #f7f7f7 50%, #f7f7f7 50%, #e4e4e4 100%); 
}