As my previous post about Cleveland web design companies and validation seemed to ruffle a few feathers I thought I would take this opportunity to look at one of the points that was brought up in the comments - That the company I work for (Optiem*) has a Web site that didn’t pass validation either.
Well that’s true. Optiem.com had a home page that pulled in 20 errors at the time of writing that post. I am happy to say that now, it validates.
I thought I would share the process and changes we went through to get validation on this .NET, CMS powered Web site.
Validation
Firstly, I always take a look at the DOCTYPE and encoding used as this can be a simple fix for some issues. We had chosen XHTML1.0 Strict when originally putting together the HTML PoC. This stayed through the implementation of the CMS. Going back to this we saw that we could just as well be using XHTML1.0 Transitional, so I forced the validator to override the existing type and use Transitional. When run again a couple of errors did disappear. So we made that change on the page templates.
Next was the encoding errors. In the .config file the encoding was being set to UTF-8, though in the <head> of the pages we had specified ISO-8859-1. Simply overriding the validator again showed a drop in errors so that was then fixed in the templates.
HTML changes
The remaining validation errors we had left seemed like simple HTML changes:
<span> outside a block-level elements causing problems<label for="f00"> where there was no input named f00border="0" inside an <input>
The label issue was an easy edit in the code. The span issue was a little more difficult. It was causing a lot of the errors as the CMS defaults to wrapping items (block-level or inline) in a span which, it turned out, was easily suppressed by using SuppressWrapperTags="true". This fixed it and cleared a lot of the errors up.
Mystery border
The last one seemed a simple fix. Remove the border="0" from the input. As this was an asp:ImageButton we couldn’t just go in and remove it from the HTML, but the mystery came when we looked at the generated code (when you “view source” in your browser) and couldn’t find it. We found the input but it was showing an inline style (generated on-the-fly) which should not be throwing the validation.
After some head-scratching Ben discovered this post about the exact same problem. It seems that user-agent string returned by the W3C validator is not recognized by ASP.NET so it servers up HTML4 - Hence the validation error.
A quick change to the web.config file and “Presto Chango”, it was fixed.
Going forward
These changes have obviously had a positive impact on the rest of the pages within the site, but there are still a couple changes here and there that need to be addressed:
- The CMS is generating a
<link> to a global.css (for the CMS editing mode) which gets placed within the <body>
- The WDG Validator still returns the
border="0" error and must suffer from a similar problem as the W3C validator at the hands of ASP.NET
The work performed took about 3-4 hours which is all that Mike & Ben could spare at the moment.
I hope that this walk-through helps other developers with problems they might be having with bringing their site through validation as well as going a little way to slay the myth that a database-driven or CMS powered Web site cannot be standards compliant.
* Optiem has no affiliation with this site. Just sayin’.
Blogged with Flock
Tags: validation, fix, optiem, .net, standards, cms
