HTML Issue on Internet Explorer only. It works fine on the rest of the browsers

Question

On our website we use magento with a custom template. And the website is rendered correctly in all browsers, except for the checkout process. In Internet Explorer it looks weird. I have already analyzed it using Firebug and Developer tools and I can't find why it looks weird on Internet Explorer and it looks fine in the rest.

To reproduce it, just add an item to the cart, and proceed to checkout as a guest or as a registered user.

I have included here a screenshot

I didn't include HTML because its too long and SO wont allow it.

Answer 1

The markup is invalid which is causing IE and Opera problems understanding what your intention is. Chrome and Firefox are just better at guessing what you want.

When faced with these sorts of problems the first place to look is the validity of the markup. A very good indication of errors can be seen by parsing the page source of the checkout page on the W3C Validator.

This immediately shows a problem:

Line 150, Column 44: document type does not allow element "li" here; missing one of "ul", "ol" start-tag`

<div class="inner-box"><li> <input name="businessdock" value="1"
                       ^
                       missing a <ul> parent

Showing that an <li> is used without a parent <ul>. I added the surrounding <ul> and closing </ul> tags locally and the page is rendering as expected in IE.

May I also suggest moving all the JavaScript out of the page into included files (where possible). The page was very large and difficult to look at initially!