recently added recaptcha to my form to prevent some spam and it broke the layout in google chrome. =(
keep in mind…I have a ‘fake form’ in the actual form to also weed out spam…
any help is appreciated
<?php
$name = htmlspecialchars($_POST['yourname']);
$email = htmlspecialchars($_POST['email']);
$problem = htmlspecialchars($_POST['problem']);
$comments = htmlspecialchars($_POST['comments']);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Contact the PAZRT- Pennsylvania Zombie Response Team</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Pennsylvania Zombie Response Team" />
<meta name="copyright" content='All Copyright Pennsylvania Zombie Response Team, all rights reserved' />
<meta name="description" content="PAZRT- Pennsylvania Zombie Response Team is an elite group of people dedicated to the preservation of the human race in the face of a looming zombie outbreak" />
<meta name="keywords" content="pazrt, zrt, pennsylvania zombie response team, pennsylvania zrt, zombies, zombie response team, guns, knives, survival" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="validation.js"></script>
</head>
<body>
<!-- This is the main div -->
<div id="wrapper">
<!-- Start logo coding -->
<div id="logo">
<img src="images/logo.png" alt="main logo" height="168px" style="width: 100%" />
</div>
<!-- Start navigation bar coding -->
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-the-pennsylvania-zombie-response-team">About Us</a></li>
<li><a href="http://www.pazrt.com/forum">Forums</a></li>
<li><a href="http://www.pazrt.com/gallery/main.php">Gallery</a></li>
<li><a href="http://wiki.pazrt.com">Wiki</a></li>
<li><a href="#">Support<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="donate-to-the-pennsylvania-zombie-response-team">Donate</a></li>
<li><a href="share-the-pennsylvania-zombie-response-team">Share</a></li>
<li><a href="http://www.cafepress.com/pazrt">Store</a></li>
</ul>
<!-- End Support drop-down menu -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><!-- End support -->
<li><a href="#">Social<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.twitter.com/pazrt">Twitter</a></li>
<li><a href="http://www.facebook.com/pages/Pennsylvania-Zombie-Response-Team/10150095905020602">Facebook</a></li>
<li><a href="http://www.youtube.com/pazrt">Youtube</a></li>
</ul>
<!-- End Social drop-down menu -->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><!-- End social -->
<li class="selected"><a href="contact-the-pennsylvania-zombie-response-team">Contact Us</a></li>
</ul>
</div>
<!-- Start contact content coding -->
<div id="contact">
<img src="images/leftlogo.png" alt="left logo" width="440px" style="float: left" />
<form id="contactpazrt" enctype="multipart/form-data" action="form.php" method="post" onsubmit="return validate_fields(this)">
<div style="display: none;">
<!-- Start Fake Form -->
<ul>
<li>Name:<br />
<input type="text" size="30" name="name" id="name" /></li>
<li><br /></li>
<li>Email:<br />
<input type="text" size="30" name="email" id="email" /></li>
<li><br /></li>
<li>Problem:<br />
<select name="problem">
<option value="website">Website Problem</option>
<option value="forum">Forum Problem</option>
<option value="misc">Miscellaneous</option>
</select></li>
<li><br /></li>
<li>Comments:<br />
<textarea name="comments" id="comments" rows="5" cols="45"></textarea></li>
</ul>
</div>
<!-- End Fake Form -->
<ul>
<li>Name:<?php echo $yourname; ?><br />
<input type="text" size="30" name="name1" id="name1" /></li>
<li><br /></li>
<li>Email:<?php echo $email; ?><br />
<input type="text" size="30" name="email1" id="email1" /></li>
<li><br /></li>
<li>Problem:<?php echo $problem; ?><br />
<select name="problem1">
<option value="website problem">Website Problem</option>
<option value="forum problem">Forum Problem</option>
<option value="misc problem">Miscellaneous</option>
</select></li>
<li><br /></li>
<li>Comments:<?php echo $comments; ?><br />
<textarea name="comments1" id="comments1" rows="3" cols="45"></textarea></li>
<li><br /></li>
<li><?php require_once('recaptchalib.php');
$publickey = "removed"; // you got this from the signup page
echo recaptcha_get_html($publickey); ?></li>
<li><br /></li>
<li><input type="submit" name="action" value="Submit" />
<input type="reset" name="reset" value="Reset" /></li>
</ul>
</form>
</div>
<!-- Start footer coding -->
<div id="footer">
<img src="images/footer.png" alt="footer logo" width="1000px" />
<p><a href="index.html">Home</a> | <a href="about-the-pennsylvania-zombie-response-team">About Us</a> | <a href="contact-the-pennsylvania-zombie-response-team">Contact Us</a><br /></p><p style="color: #FFF">Site by-<a href="http://www.webfinitydesign.com">Webfinity Design</a></p>
</div>
</div>
<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script>
<script type="text/javascript">try { var pageTracker = _gat._getTracker(""); pageTracker._trackPageview(); } catch(err) {}</script>
</body>
</html>
css
*
{
margin: 0;
padding: 0;
}
body, body a:link
{
background-color: #666;
color: #CC0000;
font-family: Arial, Helvetica, sans-serif;
}
.code
{
width: 29.38em;
height: 5em;
padding: 0;
border: solid thin #000;
background-color: #FFF;
color: #000;
overflow: auto;
}
#wrapper
{
width: 62.5em;
background-color: #000;
margin: 0 auto;
padding: 0;
}
#logo, #logo img
{
background-color: #000;
width: 100%;
position: relative;
margin: 0;
padding: 0;
vertical-align: bottom;
}
#navigation
{
background-color: #660000;
width: 62.5em;
height: 1.6em;
margin: 0 auto;
padding: 0;
}
#navigation ul
{
list-style-type: none;
}
#navigation li
{
float: left;
position: relative;
}
#navigation a, #navigation a:link, #navigation a:visited
{
text-decoration: none;
font-family: Verdana, Geneva, Arial, Sans-Serif;
font-size: 80%;
color: #FFF;
background-color: #660000;
display: block;
height: 2em;
width: 8em;
border-right: solid 1px #CCC;
text-align: center;
line-height: 2em;
outline-style: none;
}
#navigation a:hover, #navigation a:active, #navigation li.selected a:link, #navigation li.selected a:visited
{
background-color: #333;
color: #FFF;
}
#navigation li ul
{
position: absolute;
z-index: 100;
visibility: hidden;
}
#navigation li:hover ul, #navigation a:hover ul
{
visibility: visible;
top: 1.6em;
left: 0;
}
#navigation li:hover ul li a
{
background-color: #333;
color: #FFF;
text-align: left;
display: block;
width: 10em;
padding: 0 0 0 1em;
height: auto;
}
#navigation li:hover ul li a:hover
{
background-color: #990000;
color: #FFF;
}
/* IE6 Hack */
#navigation li:hover ul, #navigation li a:hover ul
{
visibility: visible;
top: 1.6em;
left: 0;
}
/* IE6 Hack */
#navigation li:hover ul li a, #navigation li a:hover ul li a
{
background-color: #333;
color: #FFF;
text-align: left;
display: block;
width: 10em;
padding: 0 0 0 0.5em;
height: auto;
}
/* IE6 Hack */
#navigation li:hover ul li a:hover, #navigation li a:hover ul li a:hover
{
background-color: #660000;
color: #FFF;
}
/* IE6 Hack */
#navigation table
{
margin: -1px;
border-collapse: collapse;
position: absolute;
top: 0.5em;
left: 0;
z-index: 100;
}
#maincontent
{
background-image: url("images/leftlogo.png");
background-repeat: no-repeat;
background-color: #000;
color: #FFF;
width: 62.5em;
margin: 0;
padding: 0;
}
#maincontent ul
{
list-style-type: none;
}
#maincontent a:link
{
background-color: #000;
color: #CC0000;
outline-style: none;
}
#share
{
background-color: #000;
color: #FFF;
width: 62.5em;
margin: 0;
padding: 0;
}
#contact
{
background-color: #000;
color: #FFF;
width: 62.5em;
margin: 0;
padding: 0;
display: inline
}
#contact ul
{
list-style-type: none;
}
#footer, #footer a:link, #footer a:visited
{
width: 62.5em;
background-color: #000;
color: #CC0000;
margin: 0 auto;
text-align: center;
text-decoration: none;
outline-style: none;
}
#footer a:hover
{
text-decoration: underline;
outline-style: none;
}