CSS gradients won't validate - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

CSS gradients won't validate

Errors in CSS validator

alegitbrand

10:27 pm on Oct 8, 2012 (gmt 0)

10+ Year Member

CSS Gradients are killing me. Anyone see any issues with my code? Any feedback greatly appreciated.

Doctype: <!DOCTYPE html>

CSS


.btn {
font-size: 12px !important;
font-weight: bold !important;
color: #FFFFFF !important;
cursor: pointer !important;
text-shadow: 0 -1px 0 #0B2847 !important;
text-align: center !important;
text-decoration:none;
line-height: 34px !important;
display: block !important;
height: 32px !important;
padding: 0 3px;
box-shadow: 0 1px 0 #6898CD inset !important;
border: 1px solid #2963A4 !important;
border-radius: 3px 3px 3px 3px !important;
background: -moz-linear-gradient(center top , #4680C2 0%, #2A64A5 100%) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#4680C2), to(#2A64A5));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4680C2', endColorstr='#2A64A5');
background: -moz-linear-gradient(top, #4680C2, #2A64A5);
}

The Error

Sorry! We found the following errors (6)
URI : TextArea
19 .btn attempt to find a semi-colon before the property name. add it
19 .btn Property progid doesn't exist : DXImageTransform
19 .btn Parse Error DXImageTransform.Microsoft.gradient(startColorstr='#4680C2', endColorstr='#2A64A5');
20 Parse Error [: -moz-linear-gradient(top]
20 Invalid ID selector [#4680C2]
21 Invalid ID selector [#2A64A5); }]

lucy24

4:18 am on Oct 9, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Anyone see any issues with my code?

Yes, but not necessarily the ones the validator made a fuss about. Last time I was at w3c-- just a couple days ago-- it jumped straight into CSS3 where vendor prefixes just get a warning, not an error. In your case it is an error though, because you don't have the unprefixed version. What about non-mozilla, non-MSIE browsers? Where's the generic rule for browsers yet to come?

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4680C2', endColorstr='#2A64A5');
background: -moz-linear-gradient(top, #4680C2, #2A64A5);

It's actually kinda funny that they complain only about the lack of a semicolon before "progid" since the real problem is in the line before. But look up "linear-gradient" at w3c and you will find more issues than you can shake a stick at.

This appears to be the horse's mouth [dev.w3.org]; at least it doesn't try to send me somewhere else ;)

<linear-gradient> = linear-gradient
`(
[ [ <angle> | to <side-or-corner> ] ,]? 
<color-stop>[, <color-stop>]+
)

But...

Gotta say that the first thing that jumped out at me in the quoted CSS was the absolutely colossal number of !important notations. They tend to imply something is conflicting with something else, and it's rarely the right way to resolve the conflict.

For example:

td.somestyle {blahblah here}
tr.otherstyle td {other and mutually exclusive blahblah}

You can attach !important tags to everything in the td.somestyle line and hope for the best, or you can short-circuit the whole thing by adding

td.somestyle, tr.otherstyle td.somestyle {blahblah, no conflict}

So far I've only met one situation where !important seemed to be the only thing that worked. It was in an @rule. And I later figured out how to do it without starting any "I'm bigger than you!" fights between lines of the CSS.