Inline form is rendered outside its containing p element




HTML: Parser
13 years ago
13 years ago


(Reporter: AnneTLambert, Assigned: Blake Ross)


1.0 Branch
Windows XP

Firefox Tracking Flags

(Not tracked)



(1 attachment, 1 obsolete attachment)



13 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050414 Firefox/1.0.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050414 Firefox/1.0.3

If I put a Form styled as inline within a P styled as a block, I would expect
the form to stay "inside" the p.

But form elements, and any elements after the form, are displayed outside the
containing P.

Reproducible: Always

Steps to Reproduce:
1. Save the following sample document as an html file.

2. Open the sample in Firefox 1.0.3.

Sample document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test form</title>

<style type="text/css">
	p { display: block; border: 2px solid red;}
	form { display: inline; }
	input { display: inline; }


	<p>Some text before the form
		<form method="post" >
			<input type="text" value="" name="test1" />
			<input type="submit" value="click this button" />
		Some text after the form. This is the last content within the red-bordered p.

Actual Results:  
In the sample document provided, the form elements, and the text after the form,
displays outside the red border of the containing p.

Actual results (pseudo-html): <start red border>Some text<end red border>Form
elements. Other text.

Expected Results:  
In the sample document provided, the inline Form elements are contained within a
block p element that has a red border. Therefore, I would think that all the
form elements within that p ought display within the p and therefore within its
red border.

Expected results (pseudo-html): <start red border>Some text. Inline Form
elements. Other text. <end red border>

Workaround for authors of sites: Use a <div> to surround the text and the form
instead of a <p>.

Workaround for viewers of sites: None. The site would just look ugly.
Created attachment 181607 [details]
original testcase

Original testcase, as attachment.
Created attachment 181608 [details]
original testcase

Oops - the previous testcase was simplified. This is the original.

BTW, this bug is INVALID - I'll soon explain why.
Attachment #181607 - Attachment is obsolete: true
The testcase is not valid XHTML. <form> is not allowed inside <p>. This has
nothing to do with the form being inline or not.
The parser implicitly closes the <p> element when it encounters the <form>
(since it knows the <form> can't be inside the <p>), and therefore the form and
everything after it is rendered outside the <p>.
Last Resolved: 13 years ago
Component: General → HTML: Parser
Product: Firefox → Core
Resolution: --- → INVALID
Version: unspecified → 1.0 Branch
Also see bug 91927 for a discussion (using TABLE, not FORM. But the idea is the
Even better, see bug 94269 which discusses the <p>/<form> issue specifically.
You need to log in before you can comment on or make changes to this bug.