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

**eJM** · Jun 15, 2007 01:48

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

**markbrown4** · Jun 15, 2007 04:42

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

**eJM** · Jun 15, 2007 08:09

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

**eJM** · Jun 15, 2007 08:16

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

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions