Script validation problem

**dmwhipp** · 02-13-2009, 08:07 PM

I found the following script in the Scripts help forum:

Code:

<script type="text/javascript"> if(document.getElementById) document.write('<style type="text/css"> .vertical li ul {display: none;} <\/style>'); </script>

I am using it on the following page:
http://www.flimpact.org/testmenu.html

It works perfectly and makes it so the submenu items don't appear when a page loads.

However, it's causing validation errors and I have no idea to alter the script without making it not work.

Here are the errors from the validator at W3.org:

Code:

Line 27, Column 98: document type does not allow element "style" here.
…ocument.write('<style type="text/css"> .vertical li ul {display: none;} <\/st

Line 27, Column 133: character "<" is the first character of a delimiter but occurred as data.
…s"> .vertical li ul {display: none;} <\/style>'); </script>

Line 27, Column 154: end tag for "style" omitted, but OMITTAG NO was specified.
…display: none;} <\/style>'); </script>

Line 27, Column 76: start tag was here.
…ment.getElementById) document.write('<style type="text/css"> .vertical li ul 

Line 27, Column > 80: XML Parsing Error: StartTag: invalid element name.
….getElementById) document.write('<style type="text/css"> .vertical li ul {dis…

Line 27, Column > 80: XML Parsing Error: Opening and ending tag mismatch: style line 27 and script.
….getElementById) document.write('<style type="text/css"> .vertical li ul {dis…

Line 42, Column 7: XML Parsing Error: Opening and ending tag mismatch: script line 27 and head.
</head>

Line 209, Column 7: XML Parsing Error: Opening and ending tag mismatch: head line 3 and html.
</html>

Line 209, Column 7: XML Parsing Error: Premature end of data in tag html line 2.
</html>

If I remove the code, the page validates perfectly with no errors.

Thank you in advance,
Deborah

**Nile** · 02-13-2009, 09:04 PM

Change that code to:

Code:

<script type="text/javascript">
if(document.getElementById) {
  document.write('<style type="text/css"> .vertical li ul {display: none;} </style>');
}
</script>

**Twey** · 02-13-2009, 09:16 PM

The first thing to be aware of is that you're using XHTML. This is probably not a good idea, since unless you send the right Content-Type header with your page, your markup will be treated as tag soup by actual browsers (for some strange reason the W3C decided that their validator would not check the Content-Type of the page and instead guess the parsing mode based on the DOCTYPE; for this reason, even if the validator proclaims it correct XHTML [which it is] the browsers will consider it invalid, since they are parsing it as HTML [in compliance with the Content-Type] rather than XHTML). Of course, if you do send the correct header, all current IEs will completely fail to render your page, since they currently lack any XHTML support. It's a quandary whose best escape is currently to stick with HTML 4.01 Strict. This will also solve your current problem.

However, if for whatever reason you must stick with XHTML, you need to declare the contents of <script> and <style> sheets explicitly as CDATA (character data) rather than the default PCDATA (parsed character data): surround them with /*<![CDATA[*/ and /*]]>*/.

**dmwhipp** · 02-15-2009, 05:10 PM

Thanks Nile, this worked great. There is only one validation error now:

Code:

Line 28, Column 68: document type does not allow element "style" here.
…ocument.write('<style type="text/css"> .vertical li ul {display: none;} </sty

We can definitely live with that.
Thanks again,
Deborah

**Nile** · 02-15-2009, 05:15 PM

Glad to hel you!

I'm supposing that your getting that error because you can't do:

Code:

<script> <style> </style> </script>

And thats what the validator things your doing. But your not.

**jscheuer1** · 02-15-2009, 05:25 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!-- 
if(document.getElementById) {
  document.write('<style type="text/css"> .vertical li ul {display: none;} <\/style>');
}
// -->
</script>
</head>
<body>

</body>
</html>

The above validates and will work.

**dmwhipp** · 02-15-2009, 05:26 PM

Hello Twey,
I'm sorry, but you lost me a little there. I thought xhtml was basically html with proper syntax (no caps, correct nesting of tags, etc.)

I learned what little I know about DocTypes from W3C. Are you saying I simply need to change my DocType declaration on my pages, or is my coding wrong? Frankly, I'm not even sure which would be the proper DocType for my coding.

Thanks in advance for any advice on this.
Deborah