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 enter image description here

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

http://jsfiddle.net/8CNVY/ thanks!! – Luis Valencia Sep 21 '12 at 08:58 — Luis Valencia, Sep 21 '12 at 08:58

score 3 · Accepted Answer · answered Sep 21 '12 at 09:25

3

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!

answered Sep 21 '12 at 09:25

andyb

43,435
12
121
150

I fixed that problem, but that didnt fix the issue. :(, – Luis Valencia Sep 21 '12 at 10:25
Hmmm interesting as it fixed it for me locally. I'll take another look – andyb Sep 21 '12 at 10:25
You have put the closing `` in the wrong place, leaving a trailing `

andyb

Sep 21 '12 at 10:29

So whats better? Browser that correct your code and give you the impression that everything is fine except for those damn others, or the ones that parse your incorrect code, showing you that something is wrong? – Mark Sep 21 '12 at 11:35

Neither is better but some leniency has to be expected. Strictly adhering to the (sometimes incomplete) specifications would probably break the Web. Valid documents are simply a good starting point so you're not at the mercy of 's guesswork. It's worth noting that even Google, Microsoft and Apple homepages are not valid. Yes, if all browsers guessed the same most people would be happy. However, although that is the least effort for the coder it is the most effort for browser logic. What should be promoted more is [Why Validation is important?](http://validator.w3.org/docs/why.html) – andyb Sep 21 '12 at 11:50

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

1 Answers1