I created a HTML page with JQuery and Fancybox but WC3 validator refuses to validate it. It is still giving me 14 errors but I can't find anything wrong with my code. There are a few errors with normal text in my strings and a few errors on my opening and closing brackets.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MagicMediaMuse - Personal Gallery</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<style type="text/css">
.galLink {
	color:white;
}
.galLink:hover{
	color:#FF6;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript"  src="js/galleryScript.js"></script>

</head>

<body>
<div id="wrapper">

<div id="header">
		
<ul>
	<li><a href="index.html">Bio</a></li>
	<li><a href="gallery.html">Graphics</a></li>
	<li><a href="websites.html">Websites</a></li>
	<li><a href="contact.html">Contact</a></li>
</ul>

</div><!-- End header -->
	
<div id="content">
    
<h1>Graphic Design</h1>
        
<div id="left">

<table cellspacing="10">
	<tr>
		<td><a class="zoom" rel="gallery" title="An image entirely created using a shape and layer effects. &lt;br/&gt; &lt;a class='galLink' href='wolfGlow.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;" href="images/gallery/wolfGlow/finished.jpg"><img src="images/gallery/wolfGlow/finishedTb.jpg" alt="" /></a></td>
		<td><a class="zoom" rel="gallery" title="A box design I created using vanishing point. &lt;br/&gt; &lt;a class='galLink' href='cereal.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;" href="images/gallery/cereal/finished.jpg"><img src="images/gallery/cereal/finishedTb.jpg" alt="" /></a></td>
		<td><a class="zoom" rel="gallery" title="An underwater poster created in Photoshop. It has a lot of filters and adjustments. &lt;br/&gt; &lt;a class='galLink' href='underwater.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;"href="images/gallery/underwater/finished.jpg"><img src="images/gallery/underwater/finishedTb.jpg" alt="" /></a></td>
		<td><a class="zoom" rel="gallery" title="A poster I created from scratch where I made a reflection on the water. &lt;br/&gt; &lt;a class='galLink' href='reflection.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;" href="images/gallery/reflection/finished.jpg"><img src="images/gallery/reflection/finishedTb.jpg" alt="" /></a></td>
		<td><a class="zoom" rel="gallery" title="An image that I created by turning a daylight setting into nighttime. &lt;br/&gt; &lt;a class='galLink' href='silentNight.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;" href="images/gallery/silentNight/finished.jpg"><img src="images/gallery/silentNight/finishedTb.jpg" alt="" /></a></td>
		<td><a class="zoom" rel="gallery" title="A poster I created with brushes and filters. &lt;br/&gt; &lt;a class='galLink' href='wolfLake.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;" href="images/gallery/wolfLake/finished.jpg"><img src="images/gallery/wolfLake/finishedTb.jpg" alt="" /></a></td>
	</tr>
	<tr>
		<td><a class="zoom" rel="gallery" title="A poster I created with blurs and filters. &lt;br/&gt; &lt;a class='galLink' href='apocalypse.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;" href="images/gallery/apocalypse/finished.jpg"><img src="images/gallery/apocalypse/finishedTb.jpg" alt="" /></a></td>
		<td><a class="zoom" rel="gallery" title="A website template that I made in Photoshop. &lt;br/&gt; &lt;a class='galLink' href='animeSite.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;" href="images/gallery/anime/finished-home.jpg"><img src="images/gallery/anime/finished-homeTb.jpg" alt="" /></a></td>
		<td><a class="zoom" rel="gallery" title="A depressed setting using Photoshop layer blending modes. &lt;br/&gt; &lt;a class='galLink' href='darkAngel.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;" href="images/gallery/darkAngel/finished.jpg"><img src="images/gallery/darkAngel/finishedTb.jpg" alt="" /></a></td>
		<td><a class="zoom" rel="gallery" title="A magical setting I created by masking a few different elements. &lt;br/&gt; &lt;a class='galLink' href='starryNight.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;"href="images/gallery/starryNight/finished.jpg"><img src="images/gallery/starryNight/finishedTb.jpg" alt="" /></a></td>
		<td><a class="zoom" rel="gallery" title="A shootout poster that I made using blurs, adustment layers, and masks. &lt;br/&gt; &lt;a class='galLink' href='jail.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;" href="images/gallery/jail/finished.jpg"><img src="images/gallery/jail/finishedTb.jpg" alt="" /></a></td>
		<td><a class="zoom" rel="gallery" title="A poster I created showing law enforcement going overboard &lt;br/&gt; &lt;a class='galLink' href='freedom.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;" href="images/gallery/freedom/finished.jpg"><img src="images/gallery/freedom/finishedTb.jpg" alt="" /></a></td>
	</tr>
</table><!-- End gallery -->
                        
<div class="clear"></div>
            
</div><!-- End left -->
    
<div class="clear"></div>
    
</div><!-- End content -->

<div id="footer">Copyright © 2010 Richard Hung. All rights reserved.</div>
    
</div><!-- End wrapper -->

</body>
</html>

Recommended Answers

All 7 Replies

no html in title tags

further explanation

<td><a class="zoom" rel="gallery" title="An image entirely created using a shape and layer effects. &lt;br/&gt; &lt;a class='galLink' href='wolfGlow.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;" href="images/gallery/wolfGlow/finished.jpg"><img src="images/gallery/wolfGlow/finishedTb.jpg" alt="" /></a></td>

title="An image entirely created using a shape and layer effects. &lt;br/&gt; &lt;a class='galLink' href='wolfGlow.html' onclick='$.fancybox.close();'&gt;Click Here For More Info&lt;/a&gt;" cant contain html, text only, links alts etc already inside a link throw the parser into fits
this scrap &lt;/a&gt; closes this link <td><a before the final > of the <a> everything after that fails

title="An image entirely created using a shape and layer effects."

I guess I'll have to find another way to put a link on the image. Thanks for all the help.

the image is already linked, it is wrapped in an <a><img /></a>, can make the tumb display the large image on mousover and foward to the html page as the href, may accomplish what this code seemse to do

I want there to be a link in the Fancybox pop up description so people can click on it. The code I have now does the job but just refuses to validate.

This is the real one with CSS and images: http://magicmediamuse.com/gallery.html

If there is no way to make it validate, I will just leave it as is.

The fancybox code is not true html, like the firefox css moz- extensions it will not validate,
but because it is an extension only on pages where the fancybox script is already running fancybox will always intercept what the html parser in the browser would interpret as ?HUH what the hell is this, I will spit the dummy?
and the page display will work
Keep the code as is, even the most picky user browser will get a functioning page,
if the w3 validators were (doubt if it could be too many scripts) programmed to recognize ALL the available plugins it would probably not bounce the html in the title tags

edit: If Id read the whole OP, instead of jumping to a line that errored, I would have noticed the fancybox script in the head and this should have been the first reply, :embarrassed:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.