PDA

View Full Version : Script validation problem



dmwhipp
02-13-2009, 08:07 PM
I found the following script in the Scripts help forum:



<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:


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:


<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:


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:


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

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

jscheuer1
02-15-2009, 05:25 PM
<!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

Nile
02-15-2009, 05:35 PM
Ummm... wrong link?

dmwhipp
02-15-2009, 05:43 PM
Hi John,
I tried this and it validates, but in IE6 on a pc, the submenus all appear on each page load:
http://www.flimpact.org/testmenu2.html

jscheuer1
02-15-2009, 05:45 PM
I meant:

http://www.dynamicdrive.com/forums/showpost.php?p=185001&postcount=6

Twey
02-15-2009, 06:06 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.)Unfortunately, that's a common misconception. XHTML is a completely different language to HTML with a deceptively similar surface syntax — similar enough, in fact, that if you just stick to the bits that are like HTML, a browser can treat it as invalid HTML and get some sense out of it. That's what's happening with your page at the moment (if you can view it in IE). However, they have completely different rules for some things. For example, John's solution:
<script type="text/javascript">
<!--
if(document.getElementById) {
document.write('<style type="text/css"> .vertical li ul {display: none;} <\/style>');
}
// -->
</script>... will solve your validation problem, but that's because if the document is considered as XHTML, that code is exactly equivalent to:
<script type="text/javascript">

</script>— XHTML, unlike HTML, treats the insides of <script> and <style> blocks as 'parsed character data' rather than 'character data' as HTML does. This means that the comment tags John inserted are not ignored as in HTML, but have the effect of commenting out the entire content of the element. This is also the cause of your current problem: the validator is attempting to parse the content of your <script> tag as HTML, and of course failing. The correct way to fix this for an XHTML-capable parser (like the validator) is to tell it not to, by marking the inside of the <script> tag explicitly as 'character data' instead of 'parsed character data':


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

However, that will only work for XHTML parsers — your page will still be effectively invalid to real browsers, because it proclaims itself to be HTML in the HTTP headers, and so any browser reading it will be using an HTML parser, not an XHTML parser.

As another example, in a real XHTML parser, you can do: <script type="text/javascript" src="/tell_flim.js" /> — but don't try this with an HTML parser, because (apart from in Firefox and other browsers using the Gecko engine, which has special error-correction code built in for this case) it will break your page completely. HTML parsers do not understand the /> ending the same way as XHTML parsers do, and so doing so will effectively enclose your entire page and all the code in it from that point forth in the <script> element.


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.Except in some special situations that you as a front-end web designer will probably never encounter, you should be using HTML 4.01 Strict, at least until IE gets support for XHTML. That is, your page should start like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">Your code at the moment uses some XHTML constructs that aren't valid in HTML, but it should be trivial to fix; in fact, from a quick glance at your page, it looks as if you could just do a search-and-replace from /> to > in your editor (after applying the correct DOCTYPE and removing the XML attributes on your <html> element) and have a valid HTML page. The switch from the deprecated Transitional to the (relatively) modern Strict might be a bigger step — you have some presentational and otherwise deprecated elements and attributes in your page which should be removed and replaced with standards-compliant equivalents (usually CSS for the presentational ones). Feel free to ask here if you encounter any problems doing so.

dmwhipp
02-15-2009, 06:32 PM
Thanks for all of the info. Unfortunately, I have over 3 dozen sites all built using the xhtml doctype declaration. But they've all been built in IE6 since that is what the majority of my clients are using (schools and charitable organizations).

I check them in IE7 and Mozilla and most of them validate without errors. For right now, I guess I'll learn more about xhtml. IE6 users are down to less than 19% (http://www.w3schools.com/browsers/browsers_stats.asp), so hopefully in a year or two it won't be an issue.
Deborah

Twey
02-15-2009, 06:38 PM
I check them in IE7 and Mozilla and most of them validate without errors.They may do so, but what the validator is checking is the page's conformance to a parsing mode that your browsers won't even be using. In practical terms, it's worthless: all you've got is invalid HTML.
IE6 users are down to less than 19% (http://www.w3schools.com/browsers/browsers_stats.asp), so hopefully in a year or two it won't be an issue.IE7 doesn't support XHTML either. Hopefully IE8 will; I guess we'll see. :)

dmwhipp
02-15-2009, 07:03 PM
I'm getting more confused. Is my code actually written in xhtml?

I always specify either "text/css" for style sheets or "text/javascript" for Javascript pages and Firefox and IE7 appear to be reading the code correctly.

I just loaded the website of all my most active clients on the homepage herehttp://www.dwwebdesigns.com/ in Firefox and IE7 and they are displaying perfectly and all of my scripts from Dynamic Drive (mostly slideshows and menus) are functioning properly.

What would you recommend at this point?
Thanks,
Deborah

Snookerman
02-15-2009, 07:11 PM
If you have the time, I recommend this article:
http://www.webdevout.net/articles/beware-of-xhtml (http://www.webdevout.net/articles/beware-of-xhtml)
It takes some time to read, but it's really important info.

dmwhipp
02-15-2009, 07:18 PM
Their page won't load. I keep getting a server timeout, but I'll bookmark it.
Thanks,
Deborah

Twey
02-15-2009, 07:38 PM
I'm getting more confused. Is my code actually written in xhtml?Your code is written in XHTML, but your server is telling the browsers that it's HTML. The validator ignores this, so it sees valid XHTML, but the browsers follow it, so they see invalid HTML.
I always specify either "text/css" for style sheets or "text/javascript" for Javascript pages and Firefox and IE7 appear to be reading the code correctly.The type of the scripts and stylesheets is irrelevant here. This type tells the browser how to interpret the contents, but your error occurs at the parsing stage, where it's still trying to figure out what's part of the element and what isn't.
I just loaded the website of all my most active clients on the homepage herehttp://www.dwwebdesigns.com/ in Firefox and IE7 and they are displaying perfectly and all of my scripts from Dynamic Drive (mostly slideshows and menus) are functioning properly.They are — thanks to the browsers' error-correction mechanisms. As far as the browser is concerned, they're just broken HTML. If you served them as XHTML, they would be valid and interpreted correctly, but a lot of things would break because you've relied on HTML-specific behaviour.
Their page won't load. I keep getting a server timeout, but I'll bookmark it.Yes, here too. Luckily there is an archived version (http://web.archive.org/web/20080209224605/http://www.webdevout.net/articles/beware-of-xhtml) available.

dmwhipp
02-15-2009, 07:47 PM
Thanks for breaking it down so I can understand this more easily.

Would you recommend that I start transitioning my sites back to html?

Deborah

jscheuer1
02-15-2009, 07:54 PM
Yes. Oh, and by the way - in case no one has mentioned this yet. You can always make the script external. It will validate just fine. Just be sure to strip the HTML <!-- --> comments.

Twey
02-15-2009, 07:58 PM
I would, yes. XHTML doesn't look like it's going anywhere soon, what with HTML5 on the rise, and there's no point having your pages sitting about being subtly broken until the world decides to finish switching over to XHTML so you can serve them properly — and even then they would need fixing before being presented as real XHTML.

After you've transitioned (or perhaps while you're transitioning?) back to HTML, I would also recommend upgrading to Strict from your old Transitional DOCTYPE. The Transitional DOCTYPEs were meant to aid in the upgrade from HTML3. Now, nobody's used HTML3 for about a decade, but for some reason people still use the old Transitional DOCTYPEs even when creating new pages, probably to avoid having to follow the modern standards. It's not good practice. This one will take a bit more work than just going back to HTML, since you haven't really used any XHTML-specific features, but you have used several features that have been deprecated in HTML4 and thus removed or replaced in the Strict DOCTYPEs.

Snookerman
02-15-2009, 08:37 PM
On the site with the article I posted, there's also a "good practice checker" that is supposed to be stricter than the w3 validator. I'm not sure how well it works since it's never complained about my code, but it could be helpful to check your code if you want to rewrite your pages. It might be down at the moment but check it out later:
http://www.webdevout.net/test?html4-good-practice (http://www.webdevout.net/test?html4-good-practice)

Good luck!

dmwhipp
02-15-2009, 09:21 PM
After you've transitioned (or perhaps while you're transitioning?) back to HTML, I would also recommend upgrading to Strict from your old Transitional DOCTYPE. The Transitional DOCTYPEs were meant to aid in the upgrade from HTML3. Now, nobody's used HTML3 for about a decade, but for some reason people still use the old Transitional DOCTYPEs even when creating new pages, probably to avoid having to follow the modern standards. It's not good practice. This one will take a bit more work than just going back to HTML, since you haven't really used any XHTML-specific features, but you have used several features that have been deprecated in HTML4 and thus removed or replaced in the Strict DOCTYPEs.

I'm trying to do this page in strict html since this is one of the sites that I'm revamping: http://www.flimpact.org/testmenu3.html

I started with over 60 errors and am down to 14 after nearly an hour. I'm using http://www.w3schools.com/html/, but can't find answers to some basic issues.

1. How do I hyperlink an image without having the hideous border? I tried CSS to no avail, but probably got it wrong.

2. How do I center an image?

3. I was using <font class="space">&nbsp;</font><br /> to make the items on the menu center vertically, but of course, that didn't validate. How can I vertically center the menu text? I tried CSS margin-top, but that added a big beige border instead of vertically aligning the text in the existing box with the background.

I'll keep looking for these answers online of course, but if you have easy answers for this I would greatly appreciate it!

Thanks,
Deborah

Twey
02-15-2009, 09:40 PM
1. How do I hyperlink an image without having the hideous border? I tried CSS to no avail, but probably got it wrong.CSS, indeed:
a:link img.noborder {
border-style: none;
}... and apply .noborder to all the affected images, or to remove them from all linked images by default:
a:link img {
border-style: none;
}
2. How do I center an image?The same way you centre any other inline element: text-align: center on the parent element.

3. I was using <font class="space">&nbsp;</font><br /> to make the items on the menu center vertically, but of course, that didn't validate. How can I vertically center the menu text? I tried CSS margin-top, but that added a big beige border instead of vertically aligning the text in the existing box with the background.Beware this use of <br>. There are very few semantic uses of <br> (address lines, lines of poetry), and you can usually spot them. If you're using <br> a lot, especially as part of a layout, it's presentational. Try styling the component elements with display: block. <ul> is good for this if what you have is a list of links: the child elements become <li>s, so you just remove the bullets (list-style-type: none) from the <ul> and make sure the <li>s don't stack up horizontally (display: block).

dmwhipp
02-15-2009, 10:18 PM
Hi Twey,
I am going to have to stick with html transitional for right now and move more slowly to strict. There are too many things missing in strict that would require a bit of work. The county rules for the school sites I do insist on all off-site links opening in new windows to clearly delineate them from the main site (after linking to a math help site whose name was later purchased by a **** company). The target element has been removed in strict. It also doesn't allow setting td widths and that is going to be a lot of work removing that from the html and adding it to my css on every site.

Also, after adding

a:link img { border-style: none; }
to my CSS, the image borders were not removed in IE6, IE7 or Firefox 3.0

After adding the html transitional doctype declaration to the page and removing all my />, I'm left with only 1 error:


Line 28, Column 110: end tag for element "STYLE" which is not open .
…rtical li ul {display: none;} </style>'); }

I appreciate all of your help and will work towards utilizing a lot more css and learn about block as you suggested. Moving all of my current sites to transitional should be pretty easy, and I'll design all my new sites with as many strict elements as possible.

Out of curiosity, why does DD use xhtml? Is it to do with all of the scripts and forums?

Thanks,
Deborah

jscheuer1
02-15-2009, 10:56 PM
All of what Twey is saying is very true. I'd just like to add (repeat actually), because I think it has been lost in the rapid posting at times in this thread, that any working javascript may be made valid by making it an external script.

Twey
02-15-2009, 10:59 PM
The county rules for the school sites I do insist on all off-site links opening in new windows to clearly delineate them from the main site (after linking to a math help site whose name was later purchased by a **** company). The target element has been removed in strict.An equivalent effect can be accomplished using client-side scripting:
<a href="foo.html" onclick="return !open(this.href);">Foo</a>
It also doesn't allow setting td widths and that is going to be a lot of work removing that from the html and adding it to my css on every site.Well, temporarily speaking, you can just replace width="25%" with style="width: 25%;". It may not be good code organisation, but it will validate. A good editor can probably do it automatically with a regex search-and-replace.
the image borders were not removed in IE6, IE7 or Firefox 3.0Peculiar, it works here. Try simply:
a img {
border: 0 none;
}
After adding the html transitional doctype declaration to the page and removing all my />, I'm left with only 1 error:
Line 28, Column 110: end tag for element "STYLE" which is not open .
…rtical li ul {display: none;} </style>'); }There was a fix for this in the original script and in the code I posted, but it was removed by some of the other posters in this thread (it's not needed in XHTML). Since the HTML parser needs to know where the element ends, even though it generally doesn't parse the content as HTML, it does take notice of end tags. You can fix this error by escaping the slash in </style> or otherwise breaking up the </s sequence, e.g. <\/style>.

dmwhipp
02-16-2009, 03:36 AM
Validation!