html form table

jagi · Apr 19, 2005

Hi

I have a html(jsp) page which has few hidden fields and a table with 4 columns and rows(row size depends on the # of records in the db).
Problem:
As the no. of rows increase in the table I see the table moving slightly down the page creating empty blank space above it.

I would like to know why this is happening is it because of the hidden fields?? and how can I avoid it...

thanks
jag

cLFlaVA · Apr 19, 2005

View > Source.
Ctrl + A.
Alt + Tab to Tek-Tips.
Ctrl + V.

Submit Post.

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

jagi · Apr 19, 2005

the following is the view source of the page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
    <head>

        <!-- insert meta data here -->
        

        <title>Maintain Attachment B</title>

        <style type="text/css" title="capstyle">
            @import "/cap/css/default.css";
        </style>

    </head>

    <body>
        <table id="mainLayout" cellspacing="0" border="0" cellpadding="0">
            <tr>
                <td id="leftMenu" valign="top">

                    <!-- Begin: Left Menu -->
                    <table cellspacing="0" border="0" cellpadding="0">
                        <tr>
                            <td align="right" class="capBanner"><img src="/cap/images/capbanner.jpg" width="131" height="170" alt="Customer Agreement Processing System" /></td>
                        </tr>

                        <tr>
                            <td class="capMenu"><br />
                                



  
    <table width="100%" border="0" cellpadding="0" cellspacing="0" >
	  <tr>
        <td nowrap="nowrap">
          &nbsp;<a href="/cap/jsp/index.jsp" onMouseOver=" window.status='Go to CAP Home page'; return true;" onMouseOut="window.status=' '; return true;">Home</a>
        </td>
      </tr>
      
        <tr>
          <td nowrap="nowrap">
            &nbsp;<a href="/cap/jsp/addAgreement.jsp" onMouseOver=" window.status='Add a new agreement'; return true" onMouseOut="window.status=' '; return true;">Add New Agreement</a>
          </td>
        </tr>
      
      <tr>
        <td nowrap="nowrap">
          &nbsp;<a href="/cap/jsp/reports.jsp" onMouseOver=" window.status='Go to Reports Menu'; return true" onMouseOut="window.status=' '; return true;">Reports</a>
        </td>
      </tr>
      <tr>
        <td nowrap="nowrap">
          &nbsp;<a href="/cap/jsp/help.jsp" onMouseOver=" window.status='Go to Help Menu'; return true" onMouseOut="window.status=' '; return true;">Help</a>
        </td>
      </tr>
      <tr>
        <td nowrap="nowrap">
          &nbsp;<a href="/cap/jsp/myAccount.jsp" onMouseOver=" window.status='Go to My Account'; return true" onMouseOut="window.status=' '; return true;">My Account</a>
        </td>
      </tr>
      <tr>
        <td nowrap="nowrap">
          &nbsp;<a href="/cap/prepareFeedback.do" onmouseover="window.status='Send questions, comments, or suggestions about CAP'; return true;" onmouseout="window.status=' '; return true;">Feedback</a>
        </td>
      </tr>
      
        <tr>
          <td nowrap="nowrap">
            &nbsp;<a href="/cap/jsp/menuAdmin.jsp" onMouseOver=" window.status='Admin Menu'; return true" onMouseOut="window.status=' '; return true;">Admin Menu</a>
          </td>
        </tr>
      
      
        <tr>
          <td nowrap="nowrap">
            &nbsp;<a href="/cap/jsp/contractLogs.jsp" onMouseOver=" window.status='Maintain Contract Number Logs'; return true" onMouseOut="window.status=' '; return true">Contract Logs</a>
          </td>
        </tr>
      
    </table>
  

                            </td>
                        </tr>
                    </table>
                    <!-- End: Left Menu -->

                </td>

                <td id="mainContent" valign="top">
                    <div align="center">
                        <span class="title">
                            Maintain Attachment B
                        </span>
                    </div>

                    





<head>
	<script language="JavaScript" src="/cap/js/dateValidate.js"></script>
    <script language="JavaScript" src="/cap/js/date-picker.js"></script>
	<script language="JavaScript" src="/cap/js/validateDataTypes.js"></script>
    <script language="JavaScript" src="/cap/js/validateLotBldg.js"></script>
	
</head>
<body onload="verify(document.getElementById('list'))">
<form name="attachmentBDetailsForm" method="post" action="/cap/processAttachmentB.do" onsubmit="return true">
<input type="hidden" name="hiddenPrimaryKey"  />


<p />
  <div align="center">
    <span class="title">Refund Order</span>
  </div>
<p />
    <table width="95%" border="0" cellpadding="1" cellspacing="0">
      <tr>
		<td align="center">Agreement Type:&nbsp;Sub, RFW Number:&nbsp;2342, Job Number:&nbsp;3242</td>
        <td>
		 <input type="hidden" name="Type" value="Sub" />
   		 <input type="hidden" name="RFW" value="2342" />
		 <input type="hidden" name="ContractNumber" value="" />
		</td>
      </tr>
	  <tr>
	    <td>&nbsp;</td>
	  </tr>
	   
      <tr>
        <td colspan="4" align="left">
        <select name="newRows">
         <option value = "0">New Rows</option>
         <option value = "2">2</option><option value = "4">4</option>
         <option value = "6" selected>6</option><option value = "8">8</option>
         <option value = "10">10</option><option value = "12">12</option>
         <option value = "14">14</option><option value = "16">16</option>
         <option value = "18">18</option><option value = "30">30</option>

        </select>
		<input type="submit" name="Add" value="Add" onmouseover=" window.status='Add a new lot/bldg'; return true" onmouseout="window.status=' '; return true" />&nbsp;&nbsp;
        <input type="submit" name="Save Changes" value="Save Changes" onclick="return verify(document.getElementById('list'))"  onmouseover="window.status='Save All Changes'; return true" onmouseout="window.status=' ';  return true" />
        <input type="submit" value="Cancel" name="Cancel" />
		<input type="submit" name="ViewDocs" value="Docs" property='createPDFSubmit' onclick="javascript:this.form.agreementRfwJobSubmitType.value='2342,3242,Sub,false,ViewDocs'" >
        <input type="hidden" name="agreementRfwJobSubmitType" />
	   </td>
      </tr>

      <tr>
        <td>
         *Required
          <table id="list" width="85%" border="1">
            <tr class="heading" >
              <td>Unit<br>Refunded</td>
              <td>Street<br>Number*</td>
              <td>Street<br>Name*</td>
              <td>Lot*/<br>Bldg#</td>
			  <td>Apt#</td>
			  <td>Pedestal#</td>
			  <td>RFW# /<br>CUS#</td>
			  <td>Date<br>Energized</td>
            </tr>

            
              <tr class="data"/>
                <td >
				<!-- <input type="hidden" name="unitRefunded" value="false" /> -->
                <input type="hidden" name="unitRefunded257" value="false"/>
				 
                 
				     <input type="checkbox" name="inputUnitIncluded257" onclick="this.form.elements['unitRefunded257'].value=this.checked" /></td>
		        
				<td align="left"><input type="text" size="4" name="inputStreetNum" value="" onkeypress="CheckChar(event.keyCode);" onblur="CheckNum(this);" /></td>
                <td align="left"><input type="text" size="29" maxlength="30" name="inputStreetName" value=""  onblur="CheckText(this);" /></td>
				<td align="left"><input type="text" size="5" maxlength="10" name="inputLotBldg" value="55"  onblur="CheckText(this);" /></td>
				<td align="left"><input type="text" size="5" maxlength="10" name="inputApt" value="33"  onblur="CheckText(this);" /></td>
				<td align="left"><input type="text" size="9" maxlength="10" name="inputPedestal" value="" onblur="CheckText(this);" /></td>
				<td align="left"><input type="text" size="15" maxlength="16" name="inputRFWCUS" value="" onblur="CheckText(this);" /></td>
				<td align="left"><input type="text" size="9" name="inputDateEnergized" value="" onblur="CheckDate(this);" />

                </td>
                <td align="left">
                
				<input type="submit" name="Delete" value="Delete" onclick="hiddenPrimaryKey.value='257'" onmouseover=" window.status=257; return true" onmouseout="window.status=''; return true" />&nbsp;
                
                </td>
                <input type="hidden" name="primaryKey" value="257" />
                <input type="hidden" name="agreePrimaryKey" value="2791" />
              </tr>
            


          </table>
        </td>
      </tr>
    </table>

    </div>

</form>
</body>



                </td>
            </tr>
        </table>

        <div id="footer">
            







        </div>

    </body>

</html>

ChrisHunt · Apr 19, 2005

Although - please - if this page is on the internet, just send us the URL as it's easier than wading though a pile of HTML in a thread posting.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

BillyRayPreachersSon · Apr 19, 2005

You are probably mis-using include files - you appear to have two head sections. I'd look at validating your code before trying to bugfix display issues.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

BillyRayPreachersSon · Apr 19, 2005

...you also have two bodies, and numerous other structural errors, again nmost likely due to a misuse, or mis-understanding of how include files work / should work.

Running your page through the validator here:

http://validator.w3.org

and fixing all errors really would be a good start.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

cLFlaVA · Apr 19, 2005

http://validator.w3.org/

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

jagi · Apr 19, 2005

I will look at the structure, its a local intranet application.

I just wanted to make sure if many hidden fields in a form could cause such behavirour?

thanks
jag

BillyRayPreachersSon · Apr 19, 2005

Hmm... I guess what I was trying to say in a round-about way is:

There's no point speculating whether input tags may not be causing the issue you are seeing when the document is in the state it is. This is because the structure is so messed up, browsers could be doing any numnber of strange things with the rendering.

Having said that, normally hidden fields would have no impact whatsoever on a document re. whitespace.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

html form table

jagi

Programmer

cLFlaVA

Programmer

jagi

Programmer

ChrisHunt

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

cLFlaVA

Programmer

jagi

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor