homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

CSS gradients won't validate
Errors in CSS validator

Msg#: 4505642 posted 10:27 pm on Oct 8, 2012 (gmt 0)

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

Doctype: <!DOCTYPE html>


.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;
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); }]



WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4505642 posted 4:18 am on Oct 9, 2012 (gmt 0)

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>]+


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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved