471046 - Submit button mis-aligned when form included as table data

Status: RESOLVED INVALID

(Core :: Layout: Tables, defect)

Description

[Paul Will]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008120121 Firefox/3.0.5
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008120121 Firefox/3.0.5

I'm using PHP to generate HTML code. When the HTML is displayed the table displayed on the screen has the first row displayed correctly with correct cellpadding and spacing and the button aligned on it's centreline, subsequent rows are displayed with the button aligned along the lower edge and empty space along the bottom of the table row. The problem is mainly aesthetic but and does not affect the operation of the form or PHP code so functionally all OK, but it's a tad annoying to have unequally sized table rows. I can supply screen shot detailing problem if required.

Reproducible: Always

Steps to Reproduce:
1.
2.
3.



Page source exhibiting the problem.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<form action="viewtimesheet.php5" method="post">
<table align="center" cellpadding="0" cellspacing="0" rules="rows">
<tr>
<td colspan="4" align="center"><h3>Select timesheet to view</h3></td>
</tr>
<td align="center" bgcolor="silver"><b>No.</b></td>
<td align="center" bgcolor="silver"><b>Week Commencing</b></td>
<td align="center" bgcolor="silver"><b>Status</b></td>

<td align="center" bgcolor="silver"><b>Select</b></td>
<tr>
<td align="center">1</td>
<td align="center">15/10/2008</td>
<td align="center">Available</td>
<td align="center">
<form action="LMviewtimesheet.php5" method="post">
<input type="submit" value="View">
<input type="hidden" name="sheetno" value="1">
<input type="hidden" name="user" value="shelley">
<input type="hidden" name="pass" value="-------">
</form>
</td>

</tr>
<tr>
<td align="center">2</td>
<td align="center">18/10/2008</td>
<td align="center">Available</td>
<td align="center">
<form action="LMviewtimesheet.php5" method="post">
<input type="submit" value="View">
<input type="hidden" name="sheetno" value="2">
<input type="hidden" name="user" value="shelley">
<input type="hidden" name="pass" value="-------">
</form>
</td>
</tr>

<tr>
<td align="center">4</td>
<td align="center">00/00/0000</td>
<td align="center">Available</td>
<td align="center">
<form action="LMviewtimesheet.php5" method="post">
<input type="submit" value="View">
<input type="hidden" name="sheetno" value="4">
<input type="hidden" name="user" value="shelley">
<input type="hidden" name="pass" value="-------">
</form>
</td>
</tr>
<tr>

<td align="center">6</td>
<td align="center">00/00/0000</td>
<td align="center">Available</td>
<td align="center">
<form action="LMviewtimesheet.php5" method="post">
<input type="submit" value="View">
<input type="hidden" name="sheetno" value="6">
<input type="hidden" name="user" value="shelley">
<input type="hidden" name="pass" value="-------">
</form>
</td>
</tr>
<tr>
<td align="center">7</td>

<td align="center">00/00/0000</td>
<td align="center">Available</td>
<td align="center">
<form action="LMviewtimesheet.php5" method="post">
<input type="submit" value="View">
<input type="hidden" name="sheetno" value="7">
<input type="hidden" name="user" value="shelley">
<input type="hidden" name="pass" value="-------">
</form>
</td>
</tr>
<tr>
<td align="center">9</td>
<td align="center">02/11/2008</td>

<td align="center">Available</td>
<td align="center">
<form action="LMviewtimesheet.php5" method="post">
<input type="submit" value="View">
<input type="hidden" name="sheetno" value="9">
<input type="hidden" name="user" value="shelley">
<input type="hidden" name="pass" value="-------">
</form>
</td>
</tr>
</table>
</form>

Comment 1

[Nochum Sossonko [:Natch]]

Attachment: reporter's testcase

Comment 2

[Paul Will]

Attachment: Jpg file detailing bug 471046

Comment 3

[Paul Will]

I've been able to improve the display of the form in the table by simply using  valign="top" in the table cells displayed with "center" alignment, (1st row) this ensures that all the cells have a similar appearance.

CPW

Comment 4

[Daniel.S]

Thanks for reporting, but this is no bug.

While you can style any element like you want to, you have too keep in mind that HTML doesn't allow some element trees (like nested form elements or form inside tr).

The first row only looks correct, because the form inside that table is removed by the parser.

Keep in mind that this is also how Safari and IE8 process this code.