PDA

View Full Version : [RESOLVED] Validation problems, xhtml1.0 & JS


Mopy
10-12-2007, 08:16 AM
Greetings,

I've finished building a project template that validates nicely as html 4.01 and XHTML 1.0 strict. The only problem I have left to solve is the javascript at the top of the page. html4.01 doesn't care about it, xhtml1.0 does care. Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ProjectX VersionX</title>
<link href="../includes/skin1/main.css" rel="stylesheet" type="text/css" />
<link href="../includes/skin1/navigation.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../includes/skin1/tabs/tabs.css" type="text/css" />
<script type="text/javascript" src="../includes/skin1/tabs/tabber.js"></script>
<script type="text/javascript">document.write('<style type="text/css">.tabber{display:none;}<\/style>');</script>
</head>
<body>
<?php include("../includes/skin1/nvassistant.html"); ?>
<div id="pagecontainer">
<div id="navicontainer">
<?php include("../includes/skin1/navigation.html"); ?>
</div>
<!-- end navbar -->
<div id="contentcontainer">
<div id="content">
<!-- begin tabs -->
<div class="tabber">
<div class="tabbertab">
<h2>Testing Tab</h2>
<div class="title">
<div class="titlenav"></div>
<div class="titletxt"> <span class="t1">Adding </span><span class="t2">Domain Names</span> <br />
<span class="t3">This is the description under the title</span> </div>
<div class="titletxt2"> <span class="t4">Hello, did you know that my name is Mopy and I like to put things like text in boxes like this.
It is very handy, for it allows me to make pretty things that were not so pretty. On the
plus side, I think it goes well in three lines. This isn't a problem is it. Font change please. </span></div>
</div>
<div class="secondtitle"></div>
</div>
<!-- end tab one -->
<div class="tabbertab">
<h2>Testing Tab</h2>
<div class="title">
<div class="titlenav"></div>
<div class="titletxt"> <span class="t1">Adding </span><span class="t2">Domain Names</span> <br />
<span class="t3">This is the description under the title</span> </div>
<div class="titletxt2"> <span class="t4">Hello, did you know that my name is Mopy and I like to put things like text in boxes like this.
It is very handy, for it allows me to make pretty things that were not so pretty. On the
plus side, I think it goes well in three lines. This isn't a problem is it. Font change please. </span></div>
</div>
<div class="secondtitle"></div>
</div>
<!-- end tab two -->
<div class="tabbertab">
<h2>Testing Tab</h2>
<div class="title">
<div class="titlenav"></div>
<div class="titletxt"> <span class="t1">Adding </span><span class="t2">Domain Names</span> <br />
<span class="t3">This is the description under the title</span> </div>
<div class="titletxt2"> <span class="t4">Hello, did you know that my name is Mo and I like to put things like text in boxes like this.
It is very handy, for it allows me to make pretty things that were not so pretty. On the
plus side, I think it goes well in three lines. This isn't a problem is it. Font change please. </span></div>
</div>
<div class="secondtitle"></div>
</div>
<!-- end tab three-->
</div>
<!-- end tabs -->
</div>
<!-- end content -->
</div>
<!-- end contentcontainer -->
</div>
<!-- end pagecontainer -->
<div id="footer"></div>
</body>
</html>

Here are the two problematic lines on 7 and 8 relating to the tabs on the page(s).

<script type="text/javascript" src="../includes/skin1/tabs/tabber.js"></script>
<script type="text/javascript">document.write('<style type="text/css">.tabber{display:none;}<\/style>');</script>

If I remove them it validates fine. I'm having trouble solving the errors however as I get seven errors when pasting the full code into here:

http://validator.w3.org/#validate_by_input

Could anyone point me in the right direction as to how I should edit those lines so the page validates correctly? Aside from removing them totally that is :P

Thankies,
Mopy

RysChwith
10-12-2007, 08:30 AM
It's the second line that's causing the issue. Modify per the red text below:<script type="text/javascript">
// <![CDATA[
document.write('<style type="text/css">.tabber{display:none;}
// ]]>
<\/style>');</script>JavaScript uses a lot of characters that have special meanings in HTML source code, so you need to tell the parser that it's intended to be parsed as character data, rather than source code.

Rys

Mopy
10-12-2007, 08:55 AM
Excellent, that did it. I can fix it from here ;)

Thanks Rys.
Mopy