SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    google chrome layout issue

    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

    Code:
    <?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
    Code:
    *
    {
    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.)

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.)
    sure thing:
    http://www.pazrt.com/contact-the-pen...-response-team

    I attached a screenshot of what it's actually doing in Chrome.
    Attached Images Attached Images

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    <li style="overflow:hidden">
                        <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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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:

    Code:
    <li style="overflow:hidden">
                        <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.
    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.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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?

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    ... much less that IE6 conditional comment garbage on the menu. Where the devil are people even learning to write code like this?
    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.
    http://www.cssplay.co.uk/menus/final_drop.html

    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.

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    LOL, I'm surprised you have never seen those menus before!
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •