Gradient is not working in firefox and IE - html

Question

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))
}

Answer 1

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

Answer 2

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.