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!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

html form table

Status
Not open for further replies.
jagi

jagi

Programmer
Joined
Mar 13, 2005
Messages
48
Location
US
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
 
Sort by date Sort by votes
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>
 
Upvote 0 Downvote

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]

 
Upvote 0 Downvote
...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:


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]
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote

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]

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
lmcate
  • Locked
  • Question Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
530
lmcate
lmcate
soni21
  • Locked
  • Question Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
jizzer
  • Locked
  • Question Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
PeDa
  • Locked
  • Question Question
Display table td's as block element on mobile phone
Replies
3
Views
1K
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top