ModX CSS and HTML validation

Hello.

I have a playground: cristiannica.com, where I have implemented the following:

Plugins:

- mutilanguage; pagination; - tooltip; - TOC; - Google Analytics; - Google mapmarkers; -favico.

The site is configured as following:
Language: english
Character encoding: UTF-8
XHTML URLs: Yes
Use friendly URLs: Yes
Suffix for friendly URLs: Yes
Use friendly aliases: Yes
Use friendly alias path: Yes
Allow duplicate aliases: Yes

Now ... what I want to ask:
If I try to validatehttp://cristiannica.com/en/welcome.html,
CSS:
W3C CSS Validator Results for http://cristiannica.com/en/welcome.html
Sorry! We found the following errors
URI : http://cristiannica.com/assets/templates/modxhost/layout.css
25 #wrapper Property _height doesn’t exist : 82px
188 #content p Property _line-height doesn’t exist : 16px
213 .FSF_searchResults Property _line-height doesn’t exist : 16px
221 .FSF_extract Property _line-height doesn’t exist : 16px
233 .FSF_extract Property _line-height doesn’t exist : 16px
242 .highlight Property _line-height doesn’t exist : 16px
URI : http://cristiannica.com/assets/templates/modxhost/form.css
9 #search Property _margin-top doesn’t exist : 42px
109 #ajaxSearch_submit Value Error : cursor hand is not a cursor value : hand
118 #ajaxSearch_output Property -moz-opacity doesn’t exist : 0.95
119 #ajaxSearch_output Property opacity doesn’t exist : 0.95
120 #ajaxSearch_output Parse Error - opacity=95) !important
URI : http://cristiannica.com/
212 Property opacity doesn’t exist : 0

HTML: Result: Failed validation, 21 Errors
Validation Output: 21 Errors

1. Warning Line 86, Column 19: character "&" is the first character of a delimiter but occurred as data.

if (!o && d.getElementById) o=d.getElementById(id);

This message may appear in several cases:
* You tried to include the "<" character in your page: you should escape it as "&lt;"
* You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
* Another possibility is that you forgot to close quotes in a previous tag.
And for that & I have 21 errors. And another ~15 for the same & in case of :
Error Line 86, Column 20: XML Parsing Error: xmlParseEntityRef: no name.

if (!o && d.getElementById) o=d.getElementById(id);
I was thinking that I was doing something wrong, so I setup another ModX at dev.cristiannica.com ...
But there is the same errors.... by default.

I admit that I’m not that good at CSS/Html. I think that is something related with sidebar. I’ve searched for ModX CSS/Html validation on forum with no success. Maybe I miss the obviously.

Some guidelines for this? To change all & to &amp somewhere... but where?? And what if will broke the js code?

Please advise me.

Regards,
Cristian Nica.

The CSS Properties you mentioned don’t seem to be valid CSS Markup. I never heard of _height.. this should probably be height. Same with the other Properties that are prefixed with an underscore.

The HTML errors come from a JavaScript. Make sure you wrap the Script in HTML Comments or CDATA like this:

or like this when using XHMTL markup

Hello.

Maybe I wasn’t explain my problem well. To point it right:
Everyone install ModX (I hope that ). Everyone want their pages validated.
So the problem is:
1. Why after clean install that doesn’t happen.
2. What we suppose to do in order to validate properly ?

Thanks,
Cristian Nica

As far as i remember, my demo page always validated correctly. Maybe the invalid code comes from a snippet? If thats not the case.. hey, it’s just a demo page. I guess one who builds his own site and cares about valid markup can do so without having a demo that validates correctly?
If it really bugs you, you could point out the necessary changes to one of the MODx developers.

I agree with you regarding building your own site with proper validation.
The problem is that Modx „out of box“ doesn’t validate.
That I wrote

Maybe I wasn’t explain my problem well. To point it right:
Everyone install ModX (I hope that Roll Eyes ). Everyone want their pages validated.
So the problem is:
1. Why after clean install that doesn’t happen.
2. What we suppose to do in order to validate properly ?

I think that is a important point -> the product who is installed with the default options must work as expected.

And in this field I want some suggestions. I agree that maybe is a snippet problem and I suspect the sidebar. But I don’t know how to fix it. BTW.. in your demo site .. 0.9.6 with ModxHost template .. do you have the sidebar snippet?

Regards,
Cristian Nica.

You are correct that the MODx won’t validate out of the box. The CSS properties with an underscore is part of what is called the underscore hack to allow the passing of information to certain browsers over other properties. Old versions of IE would read the _height and ignore the previous height.

The more correct way to do this would be to use conditional comments to link to an IE5.5-6 stylesheet that handles this.

The "opacity" property is real (CSS 3 Colour Model) (although the moz-opacity property is browser specific Mozilla based browsers)

The "cursor" property should not be as hand but move as "hand" is not part of any spec. It should likely be given the value "move".

I am giving only my opinion but I don’t know too many people who would use the MODx template for their site. I would imagine that all that use MODx will use it for a basis for learning and inspiration but build their own template for their site.

That being said, If you wanted to submit a bug report or a code patch for the default template that would make it valid and function you are more than welcome to do so.

I agree in principal that MODx’s default template should use valid HTML and CSS.

Looking at your markup (that which is in your page and template changes have invlaid makup for the doctype causing the validator to error out. I have the default install of MODx on my local testing server and there is only one error in the markup. There are all sorts of
elements that should be marked up as
there is an image element with no closing slash which is required in XHTML See XHTML Spec.

The parser may be choking on some of the markup created by the built in Rich Text Editor.

Hope this helps.

Cheers,

Jay