CODEWITHSUNDEEP
cssgoogle-chromewebkitgradient
starbucks
starbucks

Reputation: 3016

Why does this gradient not cover the entire element?

I have the following CSS:

<a class="button">
    <span>Y</span>
</a>

    .button {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
    background-color: #206CAF;
    background: -moz-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%) repeat scroll 0 0 #206CAF;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.1)),color-stop(100%,rgba(0,0,0,0.1)));
background: -webkit-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%) repeat scroll 0 0 #206CAF;
background: -o-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
background: -ms-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
background: linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
    border-color: -moz-use-text-color -moz-use-text-color rgba(0, 0, 0, 0.2);
    border-image: none;
    border-radius: 2px 2px 2px 2px;
    border-style: none none solid;
    border-width: 0 0 1px;
    box-shadow: 0 1px 1px rgba(50, 50, 50, 0.15);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    outline: 0 none;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
}

When on chrome and safari (mac and windows) and IE 9 (windows), the entire box doesn't get covered by the gradient and there is some white space at the bottom. Is there something wrong in my code or is that how it should look?

See fiddle here: http://jsfiddle.net/VmTks/

Upvotes: 1

Views: 676

Answers (3)

Adrift
Adrift

Reputation: 59799

The discrepancy between IE/Chrome/Safari and Firefox is caused by this rule:

border-color: -moz-use-text-color -moz-use-text-color rgba(0, 0, 0, 0.2);

You need to remove the -moz prefixed properties and the behaviour will be consistent across browsers. Chrome, Safari (and I assume IE) were unsurprisingly rendering that rule as invalid. You can see this in Chrome's developer tools by the border-color property having a strike-through.

http://jsfiddle.net/VmTks/4/

Upvotes: 2

Andy G
Andy G

Reputation: 19367

I believe this line 

background: linear-gradient(top,

should be

background: linear-gradient(to bottom,

but I'm not 100% certain - apologies if not!

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Upvotes: 1

Leeish
Leeish

Reputation: 5213

I added border-bottom: none and it fixed it for me. When I removed your color declaration I saw it removed the white bar so I figured it had to do with the text somehow. I'm not sure exactly why, but I just messed with different ones until I was removed. I thought it was underline at first, but I saw that was already there.

Upvotes: 2

Related Questions