Search code examples
htmldominternet-explorer-7

Form Element Missing from DOM in IE7


Why doesn't IE7 load <form> tags into the DOM? It is causing issues with CSS that I had applied to a class on the form tag. I solved the issue by wrapping the form tag with a div, and applying the styles to that, but I wanted to see if anyone could offer a technical explanation of what IE is doing with this tag when I use the following code;

<form class="contact"> ... <form>

Causes issues in IE7, as well as

<div class="contact"><form class="contact"> ... <form></div>

I had to use

<div class="contact"><form> ... <form></div>

To solve my issue, but some minor inconsistencies remain. This question isn't about my layout issue, but just in case you are wondering, the CSS I was using is;

html {
    background: #113333;
    margin: 0;
    min-height: 100%;
}
body {
    background: #ccc;
    width: 960px;
    margin: 10px auto;
    padding: 10px;
}

div { background: green; }

.contact {    
    display: inline-block;
    zoom: 1;
    *display: inline;
}

fieldset {
    float: left;
}

Also the page this relates to (content may change) is here.

So, what is IE7 doing with code like this?


Solution

  • I documented this bug here. You basically need <body> or you can't style form elements in IE pre 8/9.