CSS issue with Internet Explorer?

Question

I'm having this issue with IE8 and 9 where the entire site is breaking into pieces.

I was working on this for a good few hours to figure out what happened but was unable get to conclusion.

I have tried html5shiv and various other css tricks but they did not work. Below is the url of the site.

http://taste.wmetools.com/

Is this something that I could use with some javascript code to fix this issue or is there something that needs to be changed in css or html or both?

Answer 1

On line 17, remove the trailing comma.

Change this:

autoPlayLocked: true,

into:

autoPlayLocked: true

Some browsers allow trailing commas in object literals, eg {a:1,b:2,c:3,} . IE doesn't.

Regarding the display differences, start by putting a doctype first in the code. That keeps IE from rendering the page in Quirks Mode, which among other things makes it use a non-standard box model .

(Incidentally, making the page render in Standards Compliance Mode does actually make it accept the trailing comma. You should however remove it anyway, to make the code less sensetive to browser differences.)