Gradient not working on particular element (js version)
I have the following web page:
-
http://tinyurl.com/7pjeg43Yet PIE does not seem to be able to apply a background gradient to the following element:
Code:
#twitter h4 {
background: #a1a9ad; /* Old browsers */
background: no-repeat 130px center, -moz-linear-gradient(top, #a1a9ad 0%, #495a62 100%); /* FF3.6+ */
background: no-repeat 130px center, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1a9ad), color-stop(100%,#495a62)); /* Chrome,Safari4+ */
background: no-repeat 130px center, -webkit-linear-gradient(top, #a1a9ad 0%,#495a62 100%); /* Chrome10+,Safari5.1+ */
background: no-repeat 130px center, -o-linear-gradient(top, #a1a9ad 0%,#495a62 100%); /* Opera 11.10+ */
background: no-repeat 130px center, -ms-linear-gradient(top, #a1a9ad 0%,#495a62 100%); /* IE10+ */
background: no-repeat 130px center, linear-gradient(top, #a1a9ad 0%,#495a62 100%); /* W3C */
-pie-background: no-repeat 130px center, linear-gradient(top, #a1a9ad 0%,#495a62 100%); /* W3C */
color: #fff;
font-size: 16px;
padding: 8px 0 8px 80px;
font-weight: bold;
text-shadow: -1px 1px #46575e;
border: #fff solid 1px;
}
Also here is how I'm calling the script:
Code:
$(document).ready(function() {
if (window.PIE) {
$('#frm-search, #frm-search h4, #twitter h4, #frm-search input[type="submit"]').each(function() {
PIE.attach(this);
});
}
});
You can see how the element appears in IE7+8 in the attached image.
I cannot understand why this is the case. My other gradients work fine, and I can't see any incorrect syntax.
Has anyone else had a problem like this?
Forums
