Blog
How To Avoid the W3C 'Invalid CSS' message
15/03/2008 09:50Have 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!
———
