How To Avoid the W3C 'Invalid CSS' message

Sat, 15 Mar 2008 09:50:00 +0100

Have you ever got that new design online, then decided that you want some accreditation, or having that W3C Valid CSS and XHTML document buttons at the bottom of the page.

So you head over to The W3C Markup Validation Service and The W3C CSS Validation Service.

As always, there's a couple of errors, but you can easily fix them...

Then you have the CSS, which is always hard to fix.

There are a couple of ways to fix this:

You move the invalid CSS to a CSS file that contains all of the errors in one document.
You use Javascript hacks, image hacks and so on.

So, I'll just show you the first one.

You move the invalid CSS to a CSS file that contains all of the errors in one document.

This is really easy, all you have to do is go to the The W3C CSS Validation page, and copy and paste the lines it tells you to that are invalid.

Example (from an up-and-coming design):

31	* html img, * html .png	Lexical error at line 26, column 61. Encountered: "&" (38), after : "" )&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true) );
33	* html img, * html .png	Parse error - Unrecognized }
437	.responder a img	attempt to find a semi-colon before the property name. add it
437	.responder a img	Property progid doesn't exist : DXImageTransform
437	.responder a img	Parse Error DXImageTransform.Microsoft.Alpha(opacity=60);
438	opacity	Parse Error opacity: 0.6;
439	opacity	Parse error - Unrecognized }
441	.responder a:hover img	attempt to find a semi-colon before the property name. add it
441	.responder a:hover img	Property progid doesn't exist : DXImageTransform
441	.responder a:hover img	Parse Error DXImageTransform.Microsoft.Alpha(opacity=100);
442	opacity	Parse Error opacity: 1;
443	opacity	Parse error - Unrecognized }

So, all I do to fix this is find the numbers (on the left) and copy and paste the rules (that's the things that look like:

body { background: #FFFFFF; font: lighter 13px/20px Arial; color: #777777; }

When you've cut and pasted all of the code into a new document, save it as "invalid.css" in the same directory as your "style.css" or original stylesheet, and copy the link to your original CSS file on your pages that link to the "style.css", and paste it in the line underneath, but this time, rename the duplicated link to "invalid.css"

Good Luck!

RSS feed by Autonomouse. You can view the whole site at http://autonomouse.co.nr

All articles - autonomouse.webnode.com

How To Avoid the W3C 'Invalid CSS' message

You move the invalid CSS to a CSS file that contains all of the errors in one document.