CODEWITHSUNDEEP
htmlcss
user2108195
user2108195

Reputation: 421

Button not rendering the same in all broswers

Below is the CSS code which I have created to draw a button. When I view this in Chrome, the button looks circular as it should, but on Firefox and IE, it’s square. Why this would be the case?

<!-- language: lang-css -->

    .button {
        width:90px;
        float:right;
        background:#FEDA71;
        background:-moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49));
        background:-webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        background:-o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        background:-ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        background:linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        padding:8px 18px;
        color:#623F1D;
        font-family:'Helvetica Neue',sans-serif;
        font-size:16px;
        -moz-border-radius:48px;
        -webkit-border-radius:48px;
        border:1px solid #623F1D
    }

The code below has made Firefox start working but IE Still Doesnt Work

Code after change and still doensnt work

background:#FEDA71;
    background:-moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49));
    background:-webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    background:-o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    background:-ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    background:linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEDA71',endColorstr='#FEBB49',GradientType=0);
    padding:8px 18px;
    color:#623F1D;
    font-family:'Helvetica Neue',sans-serif;
    font-size:16px;
    border-radius:48px;
    -moz-border-radius:48px;
    -webkit-border-radius:48px;
    border:1px solid #623F1D

Upvotes: 2

Views: 79

Answers (4)

Jules
Jules

Reputation: 14520

Try adding the following code:

border-radius:48px;      //W3C

Upvotes: -1

andyb
andyb

Reputation: 43823

-moz-border-radius was dropped from Gecko 13.0 as an alias for border-radius which was released as Firefox 13 on 2012-06-05, so any later version of Firefox does not support the -moz prefix for border-radius which is why Firefox isn't applying the style.

-webkit-border-radius is still supported as an alias, which is why the style is being applied in Chrome.

As others have pointed out, adding the unprefixed border-radius will correct the missing style for Firefox.

Upvotes: 0

Ry-
Ry-

Reputation: 225115

You aren’t using the unprefixed version of the border-radius property, just -moz-border-radius and -webkit-border-radius. (Both engines have long supported the border-radius property without a vendor prefix, by the way — Chrome since 5.0 and Firefox since 4.0 — so unless this is for a reason, don’t bother using those.)

Upvotes: 6

Dine
Dine

Reputation: 7283

Try adding 

-moz-border-radius:48px;
-webkit-border-radius:48px;
border-radius:48px;

For older IE version you might want to give PIE a try http://css3pie.com/

Upvotes: 0

Related Questions