Google chrome layout issue

HTML & CSS
1

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&#37;" />
</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" />
&nbsp;
<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;
}
2

One question - what the devil are you wasting LI around the form elements for, and where are your LABELS?

That captcha is the LEAST of your problems with 5k of markup to deliver 244 BYTES of content. There is no reason for that entire form to even be in a list, much less that IE6 conditional comment garbage on the menu. Where the devil are people even learning to write code like this?

3

I’ve SEEN it before - I’m just wondering what in the name of San Juan Hill would posses someone to actually USE IT.

Since even Stu admits it’s more an experiment to see what’s possible and NOT something that should be done on real websites.

But, take that in context - I say the same thing about jquery.

4

LOL, I’m surprised you have never seen those menus before!
That nested table business was started by Stu Nichols at cssplay.co.uk

That was his version of a scriptless dropdown that worked in IE6.

He does not promote it anymore but it is still there as an archive.

The problem is that sites like purecssmenu.com are still using that code in their menu generators.

5

Hi,

Something in the captcha script code seems too wide and is causing the element to drop.

It looks like you could cure it by hiding the overflow on the parent.

e.g.: here:


[B]<li style="overflow:hidden"[/B]>
                    <script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LeuMboSAAAAAKCCexGbvPG-g2E9zEcfE7XNqCko"></script>
                    <noscript>
                    <iframe src="http://www.pazrt.com/http://api.recaptcha.net/noscript?k=6LeuMboSAAAAAKCCexGbvPG-g2E9zEcfE7XNqCko" height="300" width="500" frameborder="0"></iframe>
                    <br/>
                    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
                    <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
                    </noscript>
                </li>

(inline styles for example only)

I couldn’t see what the real cause was though as its awkward to debug with that dynamic code.

6

excellent…that seemed to do the trick…

ps- I did not write that code you showed above…that was the output of an echo from code on recaptcha’s site.

7

Hi,

We’d need to see the page as I can’t really tell what’s up from the above code. The images are missing so the display is all over the place anyway because the images don’t have dimensions and I can’t construct a working example.

Perhaps if you could explain what chrome is showing differently then I could compare those elements and might be able to see something.

Or better still do you have a link? (You can obfuscate the link a bit if you don’t want it picked up in search engines.)

8

sure thing:
http://www.pazrt.com/contact-the-pennsylvania-zombie-response-team

I attached a screenshot of what it’s actually doing in Chrome.