Button, design question

Hello,

can anyone please tell me why the next part of the script is not conform HTML tidy?

<a href="?pagina=bw-boeking&amp;do=personeel&amp;kenmerk=14010711"> <button>Personeel indelen</button></a>

would this work?

<button><a href="?pagina=bw-boeking&amp;do=personeel&amp;kenmerk=14010711"> Personeel indelen</a></button>

No that is not allowed:

line 175 column 75 - Error: document type does not allow element "a" here; missing one of "object", "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "blockquote", "address", "center", "noframes", "span", "bdo", "applet", "tt", "i", "b", "u", "s", "strike", "big", "small", "font", "em", "strong", "dfn", "code", "q", "samp", "kbd", "var", "cite", "abbr", "acronym", "sub", "sup", "noscript", "ins", "del" start-tag

can you give us the actual page url?

Sorry it’s to ea restircted part of a website I can ngive you the 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="nl" xml:lang="nl">
<head>
<base href="http://www.jcsl.nl/medewerkers/index.php"/><meta name="robots" content="index, follow" />
<meta name="lang" content="nl" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="google-site-verification" content="Hulfoz_qKKp_b0v4xpOGzzFkwyB_LjaVGzprtMEPhFo" />
<meta name="websitejudge-verify" content="fb1f951e0cddb8ebac5c34b2c4727678" />

<link rel="stylesheet" href="/medewerkers/css/containers.css" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


<link rel="stylesheet" href="/medewerkers/css/boekingen.css" type="text/css" />


<script type="text/javascript" src="/medewerkers/js/script.js"></script>

<link rel="stylesheet" href="/medewerkers/css/opmaak.css" type="text/css" />
<title>J.C. Sound &amp; Light - Producten Meidenbeurs #4 - 14010711</title>

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->

<!--[if IE8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css">
<![endif]-->
 
</head>
<body>

<!--start container-->
<div id="container">
	<!--start header-->
	<div id="header">
		<div id="headerpvh"></div>
		<div id="headerjcsl"></div>
		<div id="headeraccount">
		<!--Wie ben ik-->
		<center>
		JasperCoolen <br/> <a href="?logout" title="Log uit" class="menu">Uitloggen</a><br/><br/><a href="http://www.jcsl.nl/medewerkers/images/medewerkers/195.jpg"  rel="lightbox[Jasper]" title="Jasper">
		<img src="http://www.jcsl.nl/medewerkers/images/medewerkers/tmb/195.jpg" alt="195" height="100"/></a><br/>		</center>
		</div>
	</div>
	<!--navigatie-->
	<div id="nav">
		
<ul>
				<li><a href="?pagina=home">Home</a>
				</li>			
				<li><a href="#">Medewerkers</a><br/>
					<ul>
						<li><a href="?pagina=medewerker-overzicht">Alle Medewerkers</a></li>
						<li><a href="?pagina=profiel">Profielsite's</a></li>
						<li><a href="?pagina=mw-foto">Foto's</a></li>
						<li><a href="?pagina=rechten-overzicht">Rechten</a></li>
						<li><a href="?pagina=cursussen">Cursussen</a></li>
						<li><a href="?pagina=salaris-overzicht">Salaris</a></li>
						<li><a href="?pagina=uren-administratie">Uren administratie</a></li>
						<li><a href="?pagina=vakanties">Vakanties</a></li>
						<li><a href="?pagina=berichten">Alle berichten</a></li>
					</ul>
				</li>
				<li><a href="#">Boekingen</a><br/>
					<ul>
						<li><a href="?pagina=boekingen">Alle Boekingen</a></li>
						<li><a href="?pagina=nw-boeking">Nieuwe Boeking</a></li>
						<li><a href="?pagina=boekingen&amp;persnr=195">Mijn Boekingen</a></li>
						<li><a href="?pagina=boekingen&amp;invoerpersnr=195">Mijn Ingevoerde Boekingen</a></li>
						<li><a href="?pagina=boekingen&amp;do=geschiedenis">Geschiedenis</a></li>
						<li><a href="?pagina=podiumoverzicht">Podium</a></li>
					</ul>
				</li>
				<li><a href="#">Discussies</a><br/>
					<ul>
						<li><a href="?pagina=topic-overzicht">Discussies</a></li>
						<li><a href="?pagina=nieuw-topic&amp;topic">Nieuw Topic</a></li>
						<li><a href="?pagina=nieuw-topic&amp;evenement">Nieuw evenement</a></li>
						<li><a href="?pagina=topic-overzicht&amp;overzicht=gesloten">Gesloten topics</a></li>
					</ul>
				</li>
				<li><a href="#">Verhuur</a><br/>
					<ul>
						<li><a href="?pagina=verhuur">Verhuurlijst</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=geluid">Geluid</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=verlichting">Verlichting</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=rigging">Rigging</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=podiumdelen">Podiumdelen</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=bekabeling">Bekabeling</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=overige">Overige</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=personeel">Personeel</a></li>
						<li><a href="?pagina=verhuur&amp;webshopcat=transport">transport</a></li>
						<li><a href="?pagina=nieuw-product">Nieuw Product</a></li>
						<li><a href="?pagina=nieuw-merk">Nieuw Merk</a></li>
					</ul>
				</li>
				<li><a href="#">Website</a><br/>
					<ul>
						<li><a href="?pagina=showcase-overzicht">Showcase overzicht</a></li>
						<li><a href="?pagina=nieuwe-showcase">Nieuwe showcase</a></li>
						<li><a href="?pagina=websitefotos">Foto's jcsl.nl</a></li>
						<li><a href="?pagina=websitefotos&amp;website=podium">Foto's podium website</a></li>
						<li><a href="?pagina=nieuwsoverzicht">Alle nieuwsberichten</a></li>
						<li><a href="?pagina=nw-nieuws">Nieuw nieuwsbericht</a></li>
					</ul>
				</li>
				<li><a href="#">Klanten</a><br/>
					<ul>
						<li><a href="?pagina=klanten-overzicht">Klanten overzicht</a></li>
						<li><a href="?pagina=klant-gegevens&amp;do=nieuw">Nieuwe klant/artiest</a></li>
						<li><a href="?pagina=locatie-overzicht">Locatie Overzicht</a></li>
					</ul>
				</li>
			</ul>	</div>
	<!--einde header-->
	<!--start algemene content-->
	<div id="main">
		<h1>
		Producten Meidenbeurs #4 - 14010711		</h1>
		 <script type="text/javascript" language="javascript">
  function switchMenu(obj,show) {
    var el = document.getElementById(obj);
    if ( show != "#" ) {
      el.style.display = "none";
    }
    else {
      el.style.display = "";
    }
  }
</script> 
    Hier kun je de producten toevoegen.<br/> 

<form action='' method='post'id='select-button'>
		<span class='formInput'>zoek:</span>
		<input type='text' name='zoekproduct' />
		<input type='hidden' name='kenmerk' value='14010711'/>
		<input  type='submit' name='searchBtn' value='zoek!' />
    </form>   
	<div id="dialog" title="Resultaten selecteren" style="display: none">
	<script type="text/javascript">
	$(document).ready(function() {
		$("#dialog").dialog({

			autoOpen: false,
			show: {
				effect: "scale",
				duration: 1000
			},
			hide: {
				effect: "scale",
				duration: 1000
			}
		});

		$("#select-button").click(function(e) {
			e.preventDefault();
			$.ajax({
				url: "includes/search.php",
				data: $("#form").serialize(),
				type: "POST",
				dataType: "html"
			}).done(function(html) {

					$("#dialog").html(html);
					$("#dialog").dialog("open");
			})
			.fail(function(){
            alert("failed");
			});
		});
	});
		</script></div>
	<a href="?pagina=bw-boeking&amp;do=personeel&amp;kenmerk=14010711"> <button>Personeel indelen</button></a>
		</div>	
	<!--einde content-->
	<div class="clear"></div>
	<div id="footernav">&nbsp;</div>
<!--einde container-->
</div>
</body>
</html>

thx. looking. but just so you know when i put the code trough validator six errors came up.

I use a validator with ff and it only shows 1 error and 0 warnings, is this validator I use a wrong programme?

The validator seems to have been upset by this line:

<form action='' method='post'id='select-button'>

If you add a space after ‘post’, it’s happy.

<form action='' method='post' id='select-button'>
1 Like

Thank you very much!

yeah when i cleaned that up and reentered the code all the errors went away. Was surprised it caused that to flag an open div?

<!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="nl" xml:lang="nl">
	<head>
	<base href="http://www.jcsl.nl/medewerkers/index.php"/><meta name="robots" content="index, follow" />
	<meta name="lang" content="nl" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="google-site-verification" content="Hulfoz_qKKp_b0v4xpOGzzFkwyB_LjaVGzprtMEPhFo" />
	<meta name="websitejudge-verify" content="fb1f951e0cddb8ebac5c34b2c4727678" />

	<link rel="stylesheet" href="/medewerkers/css/containers.css" type="text/css" />
	<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" type="text/css" />
	<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


	<link rel="stylesheet" href="/medewerkers/css/boekingen.css" type="text/css" />


	<script type="text/javascript" src="/medewerkers/js/script.js"></script>

	<link rel="stylesheet" href="/medewerkers/css/opmaak.css" type="text/css" />
	<title>J.C. Sound &amp; Light - Producten Meidenbeurs #4 - 14010711</title>

	<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="css/ie6.css" />
	<![endif]-->

	<!--[if IE8]>
	<link rel="stylesheet" type="text/css" href="css/ie8.css">
	<![endif]-->
	 
	</head>
	<body>
		<!--start container-->
		<div id="container">
			<!--start header-->
			<div id="header">
				<div id="headerpvh"></div>
				<div id="headerjcsl"></div>
				<div id="headeraccount">
					<!--Wie ben ik-->
					<center>
					JasperCoolen <br/> <a href="?logout" title="Log uit" class="menu">Uitloggen</a><br/><br/><a href="http://www.jcsl.nl/medewerkers/images/medewerkers/195.jpg"  rel="lightbox[Jasper]" title="Jasper">
					<img src="http://www.jcsl.nl/medewerkers/images/medewerkers/tmb/195.jpg" alt="195" height="100"/></a><br/>		
					</center>
				</div><!-- end headeraccount-->
			</div>
			<!--navigatie-->
				<div id="nav">
				
					<ul>
						<li><a href="?pagina=home">Home</a></li>			
						<li><a href="#">Medewerkers</a><br/>
							<ul>
								<li><a href="?pagina=medewerker-overzicht">Alle Medewerkers</a></li>
								<li><a href="?pagina=profiel">Profielsite's</a></li>
								<li><a href="?pagina=mw-foto">Foto's</a></li>
								<li><a href="?pagina=rechten-overzicht">Rechten</a></li>
								<li><a href="?pagina=cursussen">Cursussen</a></li>
								<li><a href="?pagina=salaris-overzicht">Salaris</a></li>
								<li><a href="?pagina=uren-administratie">Uren administratie</a></li>
								<li><a href="?pagina=vakanties">Vakanties</a></li>
								<li><a href="?pagina=berichten">Alle berichten</a></li>
							</ul>
						</li>
						<li><a href="#">Boekingen</a><br/>
							<ul>
								<li><a href="?pagina=boekingen">Alle Boekingen</a></li>
								<li><a href="?pagina=nw-boeking">Nieuwe Boeking</a></li>
								<li><a href="?pagina=boekingen&amp;persnr=195">Mijn Boekingen</a></li>
								<li><a href="?pagina=boekingen&amp;invoerpersnr=195">Mijn Ingevoerde Boekingen</a></li>
								<li><a href="?pagina=boekingen&amp;do=geschiedenis">Geschiedenis</a></li>
								<li><a href="?pagina=podiumoverzicht">Podium</a></li>
							</ul>
						</li>
						<li><a href="#">Discussies</a><br/>
							<ul>
								<li><a href="?pagina=topic-overzicht">Discussies</a></li>
								<li><a href="?pagina=nieuw-topic&amp;topic">Nieuw Topic</a></li>
								<li><a href="?pagina=nieuw-topic&amp;evenement">Nieuw evenement</a></li>
								<li><a href="?pagina=topic-overzicht&amp;overzicht=gesloten">Gesloten topics</a></li>
							</ul>
						</li>
						<li><a href="#">Verhuur</a><br/>
							<ul>
								<li><a href="?pagina=verhuur">Verhuurlijst</a></li>
								<li><a href="?pagina=verhuur&amp;webshopcat=geluid">Geluid</a></li>
								<li><a href="?pagina=verhuur&amp;webshopcat=verlichting">Verlichting</a></li>
								<li><a href="?pagina=verhuur&amp;webshopcat=rigging">Rigging</a></li>
								<li><a href="?pagina=verhuur&amp;webshopcat=podiumdelen">Podiumdelen</a></li>
								<li><a href="?pagina=verhuur&amp;webshopcat=bekabeling">Bekabeling</a></li>
								<li><a href="?pagina=verhuur&amp;webshopcat=overige">Overige</a></li>
								<li><a href="?pagina=verhuur&amp;webshopcat=personeel">Personeel</a></li>
								<li><a href="?pagina=verhuur&amp;webshopcat=transport">transport</a></li>
								<li><a href="?pagina=nieuw-product">Nieuw Product</a></li>
								<li><a href="?pagina=nieuw-merk">Nieuw Merk</a></li>
							</ul>
						</li>
						<li><a href="#">Website</a><br/>
							<ul>
								<li><a href="?pagina=showcase-overzicht">Showcase overzicht</a></li>
								<li><a href="?pagina=nieuwe-showcase">Nieuwe showcase</a></li>
								<li><a href="?pagina=websitefotos">Foto's jcsl.nl</a></li>
								<li><a href="?pagina=websitefotos&amp;website=podium">Foto's podium website</a></li>
								<li><a href="?pagina=nieuwsoverzicht">Alle nieuwsberichten</a></li>
								<li><a href="?pagina=nw-nieuws">Nieuw nieuwsbericht</a></li>
							</ul>
						</li>
						<li><a href="#">Klanten</a><br/>
							<ul>
								<li><a href="?pagina=klanten-overzicht">Klanten overzicht</a></li>
								<li><a href="?pagina=klant-gegevens&amp;do=nieuw">Nieuwe klant/artiest</a></li>
								<li><a href="?pagina=locatie-overzicht">Locatie Overzicht</a></li>
							</ul>
						</li>
					</ul>	
				</div><!-- end nav -->
			
			<!--start algemene content-->
			<div id="main">
						<h1>Producten Meidenbeurs #4 - 14010711		</h1>
						 <script type="text/javascript" language="javascript">
							function switchMenu(obj,show) {
								var el = document.getElementById(obj);
								if ( show != "#" ) {
									el.style.display = "none";
									}
									else {
										el.style.display = "";
									}
									}
				</script> 
					Hier kun je de producten toevoegen.<br/> 

					<form action='' method='post' id='select-button'>
						<span class='formInput'>zoek:</span>
						<input type='text' name='zoekproduct' />
						<input type='hidden' name='kenmerk' value='14010711'/>
						<input  type='submit' name='searchBtn' value='zoek!' />
					</form> 
					
					<div id="dialog" title="Resultaten selecteren" style="display: none">
						<script type="text/javascript">
						$(document).ready(function() {
							$("#dialog").dialog({

								autoOpen: false,
								show: {
									effect: "scale",
									duration: 1000
								},
								hide: {
									effect: "scale",
									duration: 1000
								}
							});

							$("#select-button").click(function(e) {
								e.preventDefault();
								$.ajax({
									url: "includes/search.php",
									data: $("#form").serialize(),
									type: "POST",
									dataType: "html"
								}).done(function(html) {

										$("#dialog").html(html);
										$("#dialog").dialog("open");
								})
								.fail(function(){
								alert("failed");
								});
							});
						});
						</script>
						</div><!-- end dialog-->
							<a href="?pagina=bw-boeking&amp;do=personeel&amp;kenmerk=14010711"> <button>Personeel indelen</button></a>
				</div>	 <!-- end main-->
			<!--einde content-->
			<div class="clear"></div>
			<div id="footernav">&nbsp;</div>
		</div><!--einde container-->
		
	</body>
</html>
1 Like