why does a double form tag cause a linebreak in IE?

Question

I have this html script in a Web-Application.

I am aware, that this is invalid HTML because I should not nest forms into each other, but if "someone" did this nevertheless, how could I prevent that strange behaviour in IE? Is there a workaround with keeping that invalid forms inside?

<html><head>
    <style>
    form{
        display: inline;
    </style>
</head>
<body>
<form>
    <table border="1">
                <tr>
                            <td>first</td>
                            <td><form>...</form></td>
                            <td>second</td>
                </tr>   
    </table>
</form>

which causes a linebreak between the "first" and "second" in Internet Explorer.

it looks like this:

enter image description here

A form nested inside a form is invalid HTML. You shouldn't do it, and if you do do it, then you should expect browsers to do unexpected things. — Spudley, Jun 07 '13 at 11:28

score 4 · Answer 1 · answered Jun 07 '13 at 11:33

4

It's invalid HTML, that's why. Internet Explorer interpretes the close tag of the second form as the close tag of the first form. It DOESN'T* create a second form. However, due to this it's breaking the table and creating 2 table-structures in stead of 1. This is the root cause of why "second" is on a new line.

Please read the W3 specification for more information. This part is very important:

Flow content, but with no form element descendants.

So it isn't a bug in Internet Explorer, it's a bug in your HTML markup. Internet Explorer just interpretes your buggy HTML code different than other browsers.

answered Jun 07 '13 at 11:33

g00glen00b

41,995
13
95
133

but it is still no solution. I need a workaround for that bad HTML – rubo77 Jun 07 '13 at 11:39
3

You asked why you had a linebreak, so my answer explains why you have it. But what you're asking is impossible. Your HTML code is just wrong, so fix it. This is the same as you would give me an equation "2 + 2 = 5". I can tell you what's wrong and give you the proper solution, but I cannot change mathematics so "2 + 2" would become 5. – g00glen00b Jun 07 '13 at 11:42
Note this is fix-up behaviour is only IE versions < 10. IE10 does the same as other browsers. Good answer. +1 – Alohci Jun 07 '13 at 11:45
Yes, your answer is good, and my problem is evil. But It would be nice to have a workaround too ;) – rubo77 Jun 07 '13 at 11:52
1

Did you read my other comment? It's impossible. Is there a workaround for "2 + 2" so it would become 5? No there isn't. The only solution to the problem is to change the answer to 4, or in your case, by changing the HTML code. You can expect a workaround if there's some odd behavior. This isn't odd behavior, this is the best a browser can make of it. – g00glen00b Jun 07 '13 at 11:59

score 1 · Answer 2 · answered Jun 07 '13 at 11:27

1

use float: left; for form- coz A <form> element is a block-level element, and also you missed } in the style tag

answered Jun 07 '13 at 11:27

Chandrakant

1,971
1
14
33

score 0 · Answer 3 · answered Jun 07 '13 at 11:27

You could try and set some CSS styles to form, like padding:0px; and margin:0px;

You may need to create a class name and apply this to the class and not the 'form' in general or you may get undesired results.

By the way, some will rightly argue you should not have nested forms (forms within forms)

why does a double form tag cause a linebreak in IE?

3 Answers3