Forums

[SOLVED] IE renders form element 'outside' the form

LPent 30 Jan, 2012
I had this problem before I remember (about a year ago) but then I simply "solved" it by enclosing the whole form in a div and style that, but today that is not an option. The problem is this:

I have several forms on a site, some generated by Chornoforms, others not. The one's generated by Chronoforms, work perfectly in all browsers, except in IE.
A form in Chronoforms that looks like:

<label>xx</label><input type=text/>


Will be generated in Firefox, Chrome, Safari like so:

<form>
<label>xx</label><input type=text/>
</form>

Which is perfect, but in IE it gets rendered as:

<p><form /></p>
<label>xx</label><input type=text/>


I tested with IE9 and IE8.
The problem is that styles that depend on the form-element do not get applied.
LPent 30 Jan, 2012
It seems I did something that solved the problem on that form, but not the others... I hate IE, I really do. Even if it turns out it is not IE's fault...I still hate it.
I'll try to retrace my steps and see if I can solve it for the other two forms as well and post back.
LPent 30 Jan, 2012
Found the problem! Posting it for future reference if anyone ever comes across the same.

The Joomla editor (JCE) automatically enclosed the {chronoforms}...{/chronoforms} in <p> elements. Somehow IE chokes on that (I use HTML5 so it should not?). I changed it to <div> and now it works.
GreyHead 30 Jan, 2012
Hi LPent,

Glad you found the problem - this is quite a common one :-( I think that the cause is that technically HTML does not allow <form> tags inside <p> tags; IE breaks when this happens, the other browsers accept it.

Bob
This topic is locked and no more replies can be posted.