Conditional Comments and Valid XHTML

StackOverflow https://stackoverflow.com/questions/951596

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')
                                );
Was it helpful?

Solution

"-->" 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.

OTHER TIPS

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).

It is the nested comments. They are not allowed.

...and why comment out the entire contents of <style>? It's not as if you're coding for a browser that is dumb enough to display it. (Even command-line browsers hide the style/script blocks.)

Edit: Ah, wait. That's generated by Zend.

You should post new issue on issue tracker. It's a good way to make such mistakes corrected. http://framework.zend.com/issues/secure/Dashboard.jspa

The answer given by Phil Booth is correct in that your HTML comment syntax is incorrect; HTML comments cannot be nested. However, I'd like to take it a step further...

You should not use HTML comments to hide your CSS or JavaScript from XHTML validation. Instead, you should use CDATA tags. This is the most universal solution, supporting pretty much every browser and browser version new and old.

<head>
  <style type="text/css">
    /* <![CDATA[ */
    div.stuff { background-image: none; }
    /* ]]> */
  </style>
  <script type="text/javascript">
    /* <![CDATA[ */
    function myFunction() {
    }
    /* ]]> */
  </script>
</head>

These articles go into more detail about why the aforementioned solution is the correct one:

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top