SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict eJM's Avatar
    Join Date
    Feb 2004
    Location
    teh Ether
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Horizontal scroll bar where I don't need (or want) one.

    I added a form from the website www.jotform.com because I just don't know how to do it. I made a few adjustments to the code and the form works very well. The page validates. Unfortunately, using IE7, the page has a horizontal scroll bar that shouldn't be there. I can't figure out how I got it. The page, except for the form itself, is based on a template I use site-wide and I don't have a problem on any other page. I can't help but feel it has something to do with the form code or the supplied CSS for it (which is in the document).

    Here's the page: http://www.fitscertified.org/listing_request.html

    Here is a screen shot of the problem: http://www.enterprisejm.com/images/s...r_at_fits1.gif

    I hope one of you can help me find a solution to this.

    Thanks,

    Jim

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi there,

    The page has a lot of mess in it still, but I guess you're just looking for something that works.. so here it is

    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" xml:lang="en" lang="en">
    <head>
    <title>FITS Certified Listing Request Form</title>
    <meta name="author" content="Jim McClain" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="Flooring Inspection Training Services, Inc.; specializing in education, integrity, service and professionalism." />
    <meta name="keywords" content="inspections, floor covering, floorcovering, installer, inspector, flooring pro, a floor pro, fits, f.i.t.s., certified inspector, installation, carpet, padding, cushion, underlayment, vinyl, tile, hardwood, laminate, concrete, moisture, testing, stone, html, xhtml, css, code" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <style type="text/css" media="screen">
       @import url("http://www.fitscertified.org/fitsmain.css");
    </style>
    <script src="http://www.jotform.com/js/form.js?r3" type="text/javascript"></script>
    <style type="text/css">
    .tbmain{
     /* Changes on the form */
     background: #F2F7F9 !important;
    }
    .left{
      /* Changes on the form */
      color: black !important;
      font-family: Verdana !important;
      font-size: 12px !important;
    }
    .head{
      color:#333333;
      font-size:20px;;
      text-decoration:underline;
      font-family:"Verdana";
    }
    td.left {
      font-family:"Verdana";
      font-size:12px;
      color:black;
    }
    .pagebreak{
      font-family:"Verdana";
      font-size:12px;
      color:black;
    }
    .tbmain{
      height:100&#37;;
      background: #F2F7F9;
    }
    span.required{
      font-size: 13px !important;
      color: red !important;
    }
    #main {
    padding-left: 250px;
    }
    
    </style>
    </head>
    <body>
    <div id="minHeight"></div>
    <!-- Safari hack -->
    <div id="outer">
      <div id="top">
        <div id="pagetitle">
          <h1>FITS Listing Request</h1>
        </div>
      </div>
      <div class="wrapper">
        <div id="column-l">
          <ul id="nav-l">
            <li><a title="FITS Home" href="http://www.fitscertified.org/">FITS Home</a></li>
            <li><a title="About FITS Certified" href="##">About FITS inc.</a></li>
            <li><a title="Complete Inspectors Listings" href="http://www.fitscertified.org/inspector_directory_map.php">Inspectors Directory</a></li>
            <li><a title="Exstensive installer listing" href="http://www.fitscertified.org/installer_directory_map.php">Installers Directory</a></li>
            <li><a title="Class synopsis &amp; schedule" href="##">Certification Classes</a></li>
            <li><a title="All the news" href="##">News Archive</a></li>
            <li><a title="Resources around the Net" href="##">Resource Links</a></li>
            <li><a title="Essential inspector's tools" href="##">Shop FITS Tools</a></li>
          </ul>
        </div>
        <div class="clear"></div>
        <table width="100%" cellpadding="2" cellspacing="0" class="tbmain">
          <tr>
            <td class="topleft" width="10" height="10">&nbsp;</td>
            <td class="topmid">&nbsp;</td>
            <td class="topright" width="10" height="10">&nbsp;</td>
          </tr>
          <tr>
            <td class="midleft" width="10">&nbsp;&nbsp;&nbsp;</td>
            <td class="midmid" valign="top"><form  action="http://www.jotform.com/submit.php"  method="post" name="q_form_71651035211">
                <input type="hidden" name="formID" value="71651035211" />
                <div id="main">
                  <input type="hidden" id="spc" name="spc" value="spc" />
                  <script type="text/javascript">
       document.getElementById('spc').value = '18aafee50b30c55f50b5245d38c38822';
    </script>
                  <table cellpadding="3" cellspacing="0">
                    <tr >
                      <td width="150" class="left" valign="top" ><label>Listing Type <span class="required">*</span></label>
                      </td>
                      <td valign="top" class="right"><input type="checkbox" name="q12_ListingType[]" class="other" id="q12_0" value="Inspector"   onblur="validate(this,'Required')"  />
                        <label class="left">Inspector</label>
                        <br />
                        <input type="checkbox" name="q12_ListingType[]" class="other" id="q12_1" value="Installer"   onblur="validate(this,'Required')"  />
                        <label class="left">Installer</label>
                        <br />
                        <input type="checkbox" name="q12_ListingType[]" class="other" id="q12_2" value="New Listing"   onblur="validate(this,'Required')"  />
                        <label class="left">New Listing</label>
                        <br />
                        <input type="checkbox" name="q12_ListingType[]" class="other" id="q12_3" value="Update Old Listing"   onblur="validate(this,'Required')"  />
                        <label class="left">Update Old Listing</label>
                        <br />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" class="left" ><label >Company Name</label>
                      </td>
                      <td class="right" ><input type="text" size="20" name="q8_CompanyName" class="text" id="q8"  />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" class="left" ><label >Your Name <span class="required">*</span></label>
                      </td>
                      <td class="right" ><input type="text" size="20" name="q0_YourName" class="text" id="q0"  onblur="validate(this,'Required')"  />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" class="left" ><label >Address <span class="required">*</span></label>
                      </td>
                      <td class="right" ><input type="text" size="20" name="q3_Address" class="text" id="q3"  onblur="validate(this,'Required')"  />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" class="left" ><label >City, State and Zip <span class="required">*</span></label>
                      </td>
                      <td class="right" ><input type="text" size="20" name="q4_City,StateandZip" class="text" id="q4"  onblur="validate(this,'Required')"  />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" class="left" ><label >Phone</label>
                      </td>
                      <td class="right" ><input type="text" size="20" name="q9_Phone" class="text" id="q9"  />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" class="left" ><label >Fax</label>
                      </td>
                      <td class="right" ><input type="text" size="20" name="q1_Fax" class="text" id="q1"  />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" class="left" ><label >Cell</label>
                      </td>
                      <td class="right" ><input type="text" size="20" name="q10_Cell" class="text" id="q10"  />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" class="left" ><label >Service Area</label>
                      </td>
                      <td class="right" ><input type="text" size="20" name="q11_ServiceArea" class="text" id="q11"  />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" class="left" ><label >Certifications <span class="required">*</span></label>
                      </td>
                      <td class="right" ><input type="text" size="20" name="q14_Certifications" class="text" id="q14"  onblur="validate(this,'Required')"  />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" class="left" ><label >Services</label>
                      </td>
                      <td class="right" ><input type="text" size="20" name="q15_Services" class="text" id="q15"  />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" class="left" ><label >E-mail</label>
                      </td>
                      <td class="right" ><input type="text" size="20" name="q2_E-mail" class="text" id="q2"  />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" class="left" ><label >Website</label>
                      </td>
                      <td class="right" ><input type="text" size="20" name="q16_Website" class="text" id="q16"  />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" valign="top" class="left" ><label>Member Status <span class="required">*</span></label>
                      </td>
                      <td class="right"><input type="radio" class="other" name="q19_MemberStatus" id="q19_0" value="FITS Certified Member"   onblur="validate(this,'Required')"  />
                        <label class="left">FITS Certified Member</label>
                        <br />
                        <input type="radio" class="other" name="q19_MemberStatus" id="q19_1" value="Not A Member"   onblur="validate(this,'Required')"  />
                        <label class="left">Not A Member</label>
                        <br />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" valign="top" class="left" ><label>Type the text in the box before submitting request <span class="required"><small>(Refresh page if image is unreadable)</small></span>.</label>
                      </td>
                      <td valign="top"><script type="text/javascript" src="http://www.jotform.com/captcha.php"></script>
                        <input type="text" name="qCap" class="text" id="uword" />
                      </td>
                    </tr>
                    <tr >
                      <td width="150" class="left" >&nbsp;</td>
                      <td class="right"><input type="submit" class="btn" name="q7_" value="Submit" />
                      </td>
                    </tr>
                  </table>
                </div>
              </form></td>
            <td class="midright" width="10">&nbsp;&nbsp;&nbsp;</td>
          </tr>
          <tr>
            <td class="bottomleft" width="10" height="10">&nbsp;</td>
            <td class="bottommid">&nbsp;</td>
            <td class="bottomright" width="10" height="10">&nbsp;</td>
          </tr>
        </table>
        <script type="text/javascript">
    validate("q_form_71651035211");
    </script>
        <div id="clearfooter"></div>
      </div>
    </div>
    <div id="footer">
      <div id="nav"> <a style="margin:0 15px 0 15px;" title="FITS Home" href="http://www.fitscertified.org/">Home</a> <a style="margin:0 15px 0 15px;" title="About FITS Certified" href="##">About</a> <a style="margin:0 15px 0 15px;" title="Contact FITS" href="##">Contact</a> <a style="margin:0 15px 0 15px;" title="Site Map" href="##">Site Map</a> <a style="margin:0 15px 0 15px;" title="Code of Ethics" href="http://www.fitscertified.org/code_of_ethics.php">Code of Ethics</a> <a style="margin:0 15px 0 15px;" title="Privacy Policy &amp; Terms of Service" href="##">Privacy/TOS</a> </div>
      <div id="copyright" style="text-align:right;margin-right:10px;"><span style="float:left;margin-left:10px;">Last updated June 14, 2007</span>Content &copy;2007 <a href="##">FITS inc.</a> &minus; <a href="mailto:http://www.jmfloorcovering.com/contact.php">Website Style &amp; Code by eJM</a></div>
    </div>
    </body>
    </html>
    The reason the scroll bar was showing is just because of the amount of padding that you had used on images(which adds to the width of elements) and large % widths - mix of % and px is bound for these types of errors.


    Hope it helps

  3. #3
    SitePoint Addict eJM's Avatar
    Join Date
    Feb 2004
    Location
    teh Ether
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply, Mark. Unfortunately, your code above didn't remove the horizontal scroll bar scroll bar (only shows in IE7 that I know of). But it did remove that unsightly left side background that looks like a hardwood floor.

    Really though, I don't quite understand what you mean. The layout works fine on all the other pages. It was just when I added the code for the form, which I didn't write myself, that this problem occured. I certainly would have liked it better had the form code been done tablesss, but it was a gift horse you see. This is the code that was supplied by JotForm.com:
    Code:
    <script src="http://www.jotform.com/js/form.js?r3" type="text/javascript"></script>
    <style type="text/css">
    .tbmain{
     /* Changes on the form */
     background: #F2F7F9 !important;
    }
    .left{
      /* Changes on the form */
      color: black !important;
      font-family: Verdana !important;
      font-size: 12px !important;
    }
    .head{
      color:#333333;
      font-size:20px;;
      text-decoration:underline;
      font-family:"Verdana";
    }
    td.left {
      font-family:"Verdana";
      font-size:12px;
      color:black;
    }
    .pagebreak{
      font-family:"Verdana";
      font-size:12px;
      color:black;
    }
    .tbmain{
      height:100%;
      background: #F2F7F9;
    }
    span.required{
      font-size: 13px !important;
      color: red !important;
    }
    
    </style>
    <table width="100%" cellpadding="2" cellspacing="0" class="tbmain">
    <tr><td class="topleft" width="10" height="10">&nbsp;</td>
    <td class="topmid">&nbsp;</td>
    <td class="topright" width="10" height="10">&nbsp;</td>
      </tr>
    <tr>
    <td class="midleft" width="10">&nbsp;&nbsp;&nbsp;</td>
    <td class="midmid" valign="top">
    <form  action="http://www.jotform.com/submit.php"  method="post" name="q_form_71651035211">
    <input type="hidden" name="formID" value="71651035211" />
    <div id="main">
    <input type="hidden" id="spc" name="spc" value="spc" />
    <script type="text/javascript">
       document.getElementById('spc').value = '18aafee50b30c55f50b5245d38c38822';
    </script>
    <table width="520" cellpadding="3" cellspacing="0">
     <tr >
      <td width="150" class="left" valign="top" >
       <label>Listing Type <span class="required">*</span></label>
      </td>
      <td valign="top" class="right">
       <input type="checkbox" name="q12_ListingType[]" class="other" id="q12_0" value="Inspector"   onblur="validate(this,'Required')"  />
        <label class="left">Inspector</label> <br />
       <input type="checkbox" name="q12_ListingType[]" class="other" id="q12_1" value="Installer"   onblur="validate(this,'Required')"  />
        <label class="left">Installer</label> <br />
       <input type="checkbox" name="q12_ListingType[]" class="other" id="q12_2" value="New Listing"   onblur="validate(this,'Required')"  />
        <label class="left">New Listing</label> <br />
       <input type="checkbox" name="q12_ListingType[]" class="other" id="q12_3" value="Update Old Listing"   onblur="validate(this,'Required')"  />
        <label class="left">Update Old Listing</label> <br />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" >
       <label >Company Name</label>
      </td>
      <td class="right" >
       <input type="text" size="20" name="q8_CompanyName" class="text" id="q8"  />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" >
       <label >Your Name <span class="required">*</span></label>
      </td>
      <td class="right" >
       <input type="text" size="20" name="q0_YourName" class="text" id="q0"  onblur="validate(this,'Required')"  />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" >
       <label >Address <span class="required">*</span></label>
      </td>
      <td class="right" >
       <input type="text" size="20" name="q3_Address" class="text" id="q3"  onblur="validate(this,'Required')"  />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" >
       <label >City, State and Zip <span class="required">*</span></label>
      </td>
      <td class="right" >
       <input type="text" size="20" name="q4_City,StateandZip" class="text" id="q4"  onblur="validate(this,'Required')"  />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" >
       <label >Phone</label>
      </td>
      <td class="right" >
       <input type="text" size="20" name="q9_Phone" class="text" id="q9"  />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" >
       <label >Fax</label>
      </td>
      <td class="right" >
       <input type="text" size="20" name="q1_Fax" class="text" id="q1"  />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" >
       <label >Cell</label>
      </td>
      <td class="right" >
       <input type="text" size="20" name="q10_Cell" class="text" id="q10"  />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" >
       <label >Service Area</label>
      </td>
      <td class="right" >
       <input type="text" size="20" name="q11_ServiceArea" class="text" id="q11"  />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" >
       <label >Certifications <span class="required">*</span></label>
      </td>
      <td class="right" >
       <input type="text" size="20" name="q14_Certifications" class="text" id="q14"  onblur="validate(this,'Required')"  />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" >
       <label >Services</label>
      </td>
      <td class="right" >
       <input type="text" size="20" name="q15_Services" class="text" id="q15"  />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" >
       <label >E-mail</label>
      </td>
      <td class="right" >
       <input type="text" size="20" name="q2_E-mail" class="text" id="q2"  />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" >
       <label >Website</label>
      </td>
      <td class="right" >
       <input type="text" size="20" name="q16_Website" class="text" id="q16"  />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" valign="top" >
       <label>Member Status <span class="required">*</span></label>
      </td>
      <td class="right">
       <input type="radio" class="other" name="q19_MemberStatus" id="q19_0" value="FITS Certified Member"   onblur="validate(this,'Required')"  />
        <label class="left">FITS Certified Member</label> <br />
       <input type="radio" class="other" name="q19_MemberStatus" id="q19_1" value="Not A Member"   onblur="validate(this,'Required')"  />
        <label class="left">Not A Member</label> <br />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" valign="top" >
       <label>Type the text in the box before submitting request <span class="required"><small>(Refresh page if image is unreadable)</small></span>.</label>
      </td>
      <td valign="top">
         <script type="text/javascript" src="http://www.jotform.com/captcha.php"></script>   <input type="text" name="qCap" class="text" id="uword" />
      </td>
     </tr>
     <tr >
      <td width="150" class="left" >&nbsp;
    
      </td>
      <td class="right">
      <input type="submit" class="btn" name="q7_" value="Submit" />
     </td>
     </tr>
    </table>
    </div>
    </form>
    </td>
    <td class="midright" width="10">&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
     <td class="bottomleft" width="10" height="10">&nbsp;</td>
     <td class="bottommid">&nbsp;</td>
     <td class="bottomright" width="10" height="10">&nbsp;</td>
    </tr>
    </table>
    <script type="text/javascript">
    validate("q_form_71651035211");
    </script>
    Since my other pages work well and don't have the horizontal scroll bar, I am assuming that something in this code has caused it.

    Although my reason for searching out a form that works was because I don't know how to do it, I wasn't just looking for something that works. I took pains to have my original code validate and I want that on all the pages. But even though this page validates, I don't like that it has this scroll problem in IE7.

    Thanks for trying to help.

    Jim

  4. #4
    SitePoint Addict eJM's Avatar
    Join Date
    Feb 2004
    Location
    teh Ether
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a ghost in my computer. I swear.

    I changed the name of my original page and then plugged in the code above to see if that fixed my problem. It didn't, so I went back to my original page and saved it back to the correct file name.

    No more scroll bar.

    I refreshed the page a bunch of times thinking it would appear again, since I didn't do anything to make it go away. No more scroll bar.

    I uploaded the page, which is still exactly the same code of the page already on the server. No more scroll bar.

    Weird.

    Jim


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
  •