Internet Explorer 8 duplicate div bug

Question

on this page in IE 8, there is the famous phantom element bug. I have researched for two days all possible things I can find that might cause this, including hidden inputs (present) floated elements (not present) and HTML comments <!--...--> (present).

The "phantom element" is the grey div between the login div and the "ny kunde" button.

When trying to view this is the IE dev tools (F12) it cannot be selected, nor viewed. I believe it is because of a rendering issue in IE8.

Removing these did not help at all. Plus we apparently need the hidden input for form validation.

It's worth mentioning that this eCommerce solution doesn't validate out of the box.

I have exhausted every solution I can think of, and it is still present.

Does anyone have any suggestions?

Thanks :)

Answer 1

Starting at line 348, there is this code:

    <input type="hidden" name="return" value="/checkout/selectAddress" />

</form>
</div>

If I change it to this:

    <input type="hidden" name="return" value="/checkout/selectAddress" />

</div>
</form>

Then the problem is solved.

Simplifying (removing stuff from) your HTML:

<div id="user-wrapper">
  <form action="/user/doLogin" method="post" id="loginForm" />
  <div id="user-kundelogginn">
    </form>
  </div>
</div>

You can clearly see the form tag is being closed inside the div.

How did I figure this out?

I used the W3C Validator, which got me on the right track with this:

Line 350, Column 7: end tag for element "form" which is not open