Submit button mis-aligned when form included as table data

RESOLVED INVALID

Status

()

Core
Layout: Tables
RESOLVED INVALID
9 years ago
9 years ago

People

(Reporter: Paul Will, Unassigned)

Tracking

1.9.0 Branch
x86
All
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

9 years ago
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>
Created attachment 354405 [details]
reporter's testcase
Component: General → Layout: Tables
OS: Linux → All
Product: Firefox → Core
QA Contact: general → layout.tables
Version: unspecified → 1.9.0 Branch
(Reporter)

Comment 2

9 years ago
Created attachment 354484 [details]
Jpg file detailing bug 471046
(Reporter)

Comment 3

9 years ago
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

9 years ago
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.