Misplaced form controls in a table after I want to reveal them with javascript

RESOLVED INVALID

Status

()

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

People

(Reporter: Domenico Pontari, Unassigned)

Tracking

({testcase})

Trunk
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

12 years ago
User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; {A918238B-03CD-4FE6-A171-C5A93E74E375}; (R1 1.3))
Build Identifier: 

I found something similar in bug 140697, but this happens always when I want to reveal a form control changing CSS style.
Here there is an example (it works well in IE):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html dir="ltr">

<head>
    <title>Try form</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
        function showhide (id, set) {
            divobj = document.getElementById(id);
            if (set == true) {
                divobj.style.display = 'block';
            } else {
                divobj.style.display = 'none';
            }
        }
</script>
</head>

<body  class="user course-1" id="user-edit">

<form method="post" id="form" enctype="multipart/form-data" action="edit.php">
<div id="page">

<table summary="user data form" class="formtable">
<tr id="firstname_row">
<th>Nome</th>
	<td>
		<input type="text" id="firstname" size="30" alt="firstname" maxlength="20" value="" />

	</td>
</tr><tr id="lastname_row">
<th>Cognome</th>

	<td>
		<input type="text" id="lastname" size="30" alt="lastname" maxlength="20" value="" />

	</td>
</tr><tr id="email_row">
<th>Indirizzo email</th>
	<td>
		<input type="text" id="email" size="30" alt="email" maxlength="100" onfocus="showhide ('email_1_row', true)" value="" />

	</td>

</tr><tr id="email_1_row">
<th>Indirizzo email 2</th>
	<td>
		<input type="text" id="email_1" size="30" alt="email_1" maxlength="100" onfocus="showhide ('email_2_row', true)" value="" />

	</td>
</tr><tr id="email_2_row">
<th>Indirizzo email 3</th>
	<td>
		<input type="text" id="email_2" size="30" alt="email_2" maxlength="100" onfocus="showhide ('email_3_row', true)" value="" />

	</td>
</tr><tr id="email_3_row">
<th>Indirizzo email 4</th>
	<td>
		<input type="text" id="email_3" size="30" alt="email_3" maxlength="100" onfocus="showhide ('email_4_row', true)" value="" />

	</td>
</tr><tr id="email_4_row">
<th>Indirizzo email 5</th>
	<td>

		<input type="text" id="email_4" size="30" alt="email_4" maxlength="100" onfocus="showhide ('email_5_row', true)" value="" />

	</td>
</tr><tr id="email_5_row">
<th>Indirizzo email 6</th>
	<td>
		<input type="text" id="email_5" size="30" alt="email_5" maxlength="100" value="" />

	</td>
</tr><tr>
    <td colspan="2" style="text-align: center;"><input type="submit" value="Aggiornamento profilo" /></td>

</tr>
</table>
<input type="hidden" name="course" value="1" />
<input type="hidden" name="id" value="4" />
</div>
</form>

<script type="text/javascript">
showhide ('email_1_row', false);
showhide ('email_2_row', false);
showhide ('email_3_row', false);
showhide ('email_4_row', false);
showhide ('email_5_row', false);
</script>

</body>
</html>



Reproducible: Always

Steps to Reproduce:
1. copy the code I submitted in a file and try it


Actual Results:  
the row (<tr>) I reveal seems to be included in the first <td> tag

Expected Results:  
each row must be in column

Comment 1

12 years ago
Created attachment 215584 [details]
Reporter's testcase

1. load file
2. click into 3rd input ('Indirizzo email')
Created attachment 215596 [details]
Simpler testcase
I think this bug is invalid, you have style="display:block" on the table-row, so Mozilla is generating two anonymous table-cells and table-row around that.
I think that's all according to what css2.1 says, afaics.
Assignee: general → nobody
Component: General → Layout: Tables
Keywords: testcase
Product: Mozilla Application Suite → Core
QA Contact: general → layout.tables
Version: unspecified → Trunk
Or this bug is a duplicate of another (invalid) bug, which is very likely.
(Reporter)

Comment 5

12 years ago
<tr> I tried with inline option... it's worse.
Just use display = 'table-row'.

Comment 7

12 years ago
toggle between display:none
 and display:'' that works crossbrowser. see https://bugzilla.mozilla.org/show_bug.cgi?id=97506#c50
Status: UNCONFIRMED → RESOLVED
Last Resolved: 12 years ago
Resolution: --- → INVALID
(Reporter)

Comment 8

12 years ago
Thanks! The solution was 'table-row' property. (instead of Bernd's suggestion seems to me unapplicable with javascript).
You need to log in before you can comment on or make changes to this bug.