CODEWITHSUNDEEP
htmlcssinternet-explorergoogle-chromefirefox
user2170878
user2170878

Reputation: 163

Gradient is not working in firefox and IE

Firefox 26.0 and IE 8 are giving me issues. Works fine in chrome. Been stuck for a long time now, anyone can help me out?

.sectionBoxTitle {

height: 40px;
margin: 0px 0 60px 0;
padding: 0;
color: white;
background: -moz-linear-gradient(100% 100% 90deg, ##0b4bbb, #007fe4);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0b4bbb), to(#007fe4))

}

Upvotes: 0

Views: 96

Answers (2)

Joeytje50
Joeytje50

Reputation: 19112

What you'll need is the following:

.sectionBoxTitle {
    height: 40px;
    margin: 0px 0 60px 0;
    padding: 0;
    color: white;
    background: #0B4BBB; /* Old browsers */
    background: -moz-linear-gradient(top, #0B4BBB 0%, #007FE4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0B4BBB), color-stop(100%, #007FE4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #0B4BBB 0%,#007FE4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #0B4BBB 0%,#007FE4 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #0B4BBB 0%,#007FE4 100%); /* IE10+ */
    background: linear-gradient(to bottom, #0B4BBB 0%,#007FE4 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b4bbb', endColorstr='#007fe4',GradientType=0 ); /* IE6-9 */
}

Demo.

You'll need all these browser-specific prefixes for it to work in every browser. Just specifying -moz- and the old syntax for -webkit- probably used to cover all browsers that would support gradients back in 2010, but nowadays there are more browsers that support it, so more browsers to add prefixes for.

This code was taken directly from http://www.colorzilla.com/gradient-editor/. I only changed the color format from rgba() to #HEX.

Upvotes: 1

War10ck
War10ck

Reputation: 12508

Here is a cross-browser solution that should help you out. I think it covers most scenarios:

.sectionBoxTitle {
    height: 40px;
    margin: 0 0 60px 0;
    padding: 0;
    color: white;

    /* For Browsers that do not support gradients */
    background-color: #0b4bbb;
    /* Safari 4+, Chrome 1-9 */
    background: -webkit-gradient(linear,0% 0,0% 100%,from(#0b4bbb),to(#007fe4));
    /* Safari 5.1+, Mobile Safari, Chrome 10+ */
    background: -webkit-linear-gradient(top,#0b4bbb,#007fe4);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top,#0b4bbb,#007fe4);
    /* For IE 6,7,8,9 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b4bbb',endColorstr='#007fe4');
    /* IE 10+ */
    background: -ms-linear-gradient(top,#0b4bbb,#007fe4);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top,#0b4bbb,#007fe4);
    /* CSS 3 Support */
    background: linear-gradient(to bottom,#0b4bbb 0,#007fe4 100%);  
}

FIDDLE

Documentation: CSS Tricks

Upvotes: 2

Related Questions