Conditional Comments and Valid XHTML

Question

Given the code (which looks like it should be valid):

<!--[if lt IE 7]> <style type="text/css" media="screen">
<!--
div.stuff { background-image: none; }
--></style><![endif]-->

The W3C validator throws a fit:

• S separator in comment declaration
• invalid comment declaration: found name start character outside comment but inside comment declaration
• character data is not allowed here

etc etc

I'm not totally sure whats going on. Is it the 'nested' comments? The tag is being generated by the Zend Framework Viewhelper headStyle

$this->headStyle()->prependStyle('div.stuff { background-image: none; }',
                                 array('conditional' => 'lt IE 7')
                                );

Answer 1

You can't have a -- inside of a comment unless it's part of the --> ending in valid XML/XHTML. Just the way comments work.

From this source:

For Compatibility, the string "--" (double-hyphen) MUST NOT occur within comments.

You should find a more standard way to differentiate between browsers (or, more ideally, have a layout that doesn't require differentiation between browsers at all).

Answer 2

"-->" closes any comment, there is no notion of nesting comments inside each other. So in your code, the first "-->" closes both of your comments. Then the <![endif]--> is completely outside of any comments, so doesn't make any sense.