Question

I stumbled across a strange behavior in Firefox. I have a dynamically created text, into which I have inserted a form element including a link in order to be able to pass parameters via the post method. Ideally, it should just flow with the text and look like a normal anchor.
However, whereas it displays normally in IE, Firefox terminates the paragraph just before the form, which inserts an undesired line break.
Does anyone have an idea why this happens and have a workaround / alternative solution ?

Result in IE (ok):

<p class="article" >This is my paragraph and here goes my 
<form style="display: inline" name="link_form" action="link.html" method="post">
<input type="hidden" name="lnk_id" value="1" /><a class="link" href="#" onclick="link_form.submit()">link</a></form>**</p>**

Result in Firefox (ko):

<p class="article" >This is my paragraph and here goes my**</p>** 
<form style="display: inline" name="link_form" action="link.html" method="post">
<input type="hidden" name="lnk_id" value="1" /><a class="link" href="#" onclick="link_form.submit()">link</a></form>

Thanks in advance

Answer 1

It’s perfectly normal, a P tag can only contain inline elements, which is not the case of a form. (see http://www.w3.org/TR/html401/struct/text.html#h-9.3)

Since HTML4 specs allow you not to close the tags, Firefox assumes you forgot to close your P tag before the beginning of your form, hence the closing tag you can see when inspecting the DOM with Firebug, for example.