dan983 dan983 - 4 years ago 148
HTML Question

Why is HTML Table (TD) height being changed after adding FORM with a Link

I am currently adding a Form with a Link to a table.

The code works as expected however the link position is at the top of the cell.

This is causing the other cells height to change as a result.

Code as Follows:


echo '<td"><form id=\'form\' method="POST" action="test.php">
<input type=\'hidden\' name=\'test\' value=\'test\' />
<input type=\'hidden\' name=\'test2\' value=\'test2\' />
<a id="myLink" title="Click to do something" href="#"
onclick="submitLink(\'form\');return false;">click here</a>


function submitSessionForm(sessionID){
//Submit Form

Why is the cell height changed? The Form height doesn't seem to be causing the issue (As when inspecting the element the TD is causing the row height to change.

Any advice would be appreciated.

Answer Source

By default, the form element adds a margin-bottom of 1em.

So, add

form {
  margin-bottom: 0;

By the way, why not use " for the attributes. Then you don't need those \' everywhere (not that this is any of my business).

echo '<td>
  <form id="form" method="POST" action="test.php">
    <input type="hidden" name="test" value="test" />
    <input type="hidden" name="test2" value="test2" />
    <a id="myLink" title="Click to do something" href="#" onclick="submitLink(\'form\'); return false;">click here</a>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download