CODEWITHSUNDEEP
csscross-browser
Ehsan
Ehsan

Reputation: 2285

different result in -webkit-linear-gradient and -moz-linear-gradient

I'm using some CSS for the background of a button, but it looks different in Firefox, Chrome and IE.

I'm using -webkit-linear-gradient and -moz-linear-gradient but they don't work; the background in Firefox is dark and in Chrome it's white.

.list-link a {
    background:-webkit-gradient(linear,,color-stop(#696969,0),color-stop(#3D3D3D,0.5),color-stop(#292929,0.5),color-stop(#171717,1));
    background:-webkit-linear-gradient(center top , #696969 0%, #3D3D3D 50%, #292929 50%, #171717 100%) repeat scroll 0 0 transparent;
    background:-moz-linear-gradient(center top , #696969 0%, #3D3D3D 50%, #292929 50%, #171717 100%) repeat scroll 0 0 transparent;
    background:-o-linear-gradient(center top , #696969 0%, #3D3D3D 50%, #292929 50%, #171717 100%) repeat scroll 0 0 transparent;
    background:linear-gradient(center top , #696969 0%, #3D3D3D 50%, #292929 50%, #171717 100%) repeat scroll 0 0 transparent;
    border:1px solid #000000;
    -webkit-border-radius:5px 5px 5px 5px;
    -moz-border-radius:5px 5px 5px 5px;
    border-radius:5px 5px 5px 5px;
    -webkit-box-shadow:0 1px 0 0 #949494 inset, 0 -1px 5px 0 #757575 inset;
    -moz-box-shadow:0 1px 0 0 #949494 inset, 0 -1px 5px 0 #757575 inset;
    box-shadow:0 1px 0 0 #949494 inset, 0 -1px 5px 0 #757575 inset;
    color:#FFFFFF;
    cursor:pointer;
    display:inline-block;
    font-weight:normal;
    height:auto;
    padding:6px 17px;
    text-align:center;
    text-shadow:none;
}

Upvotes: 3

Views: 2513

Answers (2)

Tom Loudon
Tom Loudon

Reputation: 63

As Jan points out. That generator will help you. If you click on the 'Import CSS' button in the bottom right you can paste in the working mozilla CSS and it'll output all the others for you.

Specifically you're 'Chrome' declaration was lacking the correct position information. It would seem you needed ... linear, left top, left, ..., as below.

background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#696969), color-stop(50%,#3d3d3d), color-stop(50%,#292929), color-stop(100%,#171717));

Upvotes: 0

Jan Turoň
Jan Turoň

Reputation: 32912

This generator should produce you the correct cross-browser code.

You can use import from css button at the lower right corner of the generated css fieldset. For your code, this was the output:

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

Upvotes: 3

Related Questions